javascript - 更正 javascript 以与 html a href 对齐

问题描述

我的单页网站无法正常运行。我通过 a href 将它连接到列表，但我的网站仍然没有出现。我正在尝试通过编写以下代码笔以我自己的方式进行复制

https://codepen.io/bassta/pen/Eicla?editors=1111 如果可以，请提供帮助。

 <html> <head>   <script>$(function() {

//Image by Ivaylo Yovchev (  http://ivayloyovchev.com/weddings )
  
	//elements
	var $menu = $(".menu");
	var $pages = $(".page");
	var $menuLi = $menu.find("li").not(".to-home");
	var $toHome = $menu.find(".to-home");
	
	//interna vars
	var currentPage = "";
	
	$toHome.on("click", function() {
		currentPage = "";
		TweenMax.to($pages, 0.5, {
			left: "-70%"
		});
		TweenLite.to($menuLi.filter(".active"), 0.5, {
			className: "-=active"
		});
	});
	
	$menuLi.on("click", function(event) {
		
		var $this = $(this);
		var thisHref = $this.find("a").attr("href");
		
		if (currentPage !== thisHref && $pages.filter(thisHref).length > 0) {
			currentPage = thisHref;
			TweenMax.to($pages, 0.5, {
				left: "-70%"
			});
			TweenMax.to($pages.filter(thisHref), 0.5, {
				left: 0
			});
			TweenLite.to($menuLi.filter(".active"), 0.5, {
				className: "-=active"
			});
			TweenLite.to($this, 0.5, {
				className: "+=active"
			});
		}
		
		event.preventDefault();
	});
});</script><style>

ul  {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ol {list-style:none;
width:200px;
    
}
ul li {
  box-shadow: 6px 6px 2px 1px #FFEF99;
  border-radius: 5px;
  float: right;
  width: 240px;
  height: 40px;
  background-color: black;
  opacity: .4;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  margin-right: 8px;
}

ul li a {
  text-decoration: none;
  color: gold;
}

ul li a:hover {
  background-color: red;
  display: block;
  border-radius: 5px;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

.page{
  background-color:red;
  
}
.page-content{background-color:red;}

</style> </head><body><ul>

              <li style="width: 140px;"><a href="#Home">Home</a></li>
    </ul>
    <ul>
      <li style="width: 140px;"><a href="#Product">Product</a>
        <ul>
          <li style="width: 140px;"><a href="Product1">Product1</a></li>
        </ul>
      </li>
    </ul>
    <ul>
      <li style="width: 140px;"><a href="Comb">Comb</a>
        <ul>
          <li style="width: 140px;"><a a href="Lorem"></a>Lorem</li>
        </ul>
      </li>
      <ul>
        <li style="width: 140px;"><a a href="Brush">Brush</a>
          <ul>
            <li style="width: 140px;"><a a href="Clip">Clip</a></li>
          </ul>
        </li>
         <ul>
      <li style="width: 140px;"><a href="Contact Us">Contact Us</a>
        <ul>
         <li style="width: 140px;"><a  href="About us">About Us</a></li>
        </ul>
      </li>
      <ul>
        <li style="width: 140px;"><a href="Testimonials">Testimonials</a>
          <ul>
           <li style="width: 140px;"><a href="Terms"></a></li>
          </ul>
        </li> 
        <div id="aboutus" class="page">
        <div class="page-content">
            <h2>Lorem</h2>

            <p>lorem</p>
        </div>
    </div>

    <div id="gallery" class="page">
        <div class="page-content">
            <h2>"Neque porro quisquam</h2>

            <p> dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to </p>
        </div>
    </div>

    <div id="Product" class="page">
        <div class="page-content">
            <h2>est qui dolorem ipsum quia </h2>

            <p>make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
        </div>
    </div>

    <div id="Contactus" class="page">
        <div class="page-content">
            <h2>Contacts</h2>

            <p>Some contact form</p>
        </div>
    </div>
    </body> </html>

我的单页网站无法正常运行。我通过 a href 将它连接到列表，但我的网站仍然没有出现。我正在尝试通过编写以下代码笔以我自己的方式进行复制

标签： javascripthtml

javascript - 更正 javascript 以与 html a href 对齐

问题描述

解决方案

推荐阅读