我试图将最后一个 li 显示为选中状态,并且最初我需要显示它的子菜单项。
所以这里是 Demo Link我试过了。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test Page</title>
<link rel="stylesheet" href="styles/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/modernizr-1.6.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="page">
<header>
<figure>
<img src="images/logo.png" width="48" height="49" alt="Logo">
<figcaption>
<h1>Company Name</h1>
</figcaption>
</figure>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li class="submenuHeader">
<a href="products.html">Products</a>
<ul class="submenu">
<li><a href="webpage.html">Web Page</a></li>
<li><a href="mobileapp.html">Mobile App</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<section>
<h1>Lorem Ipsum dolor</h1>
<h3>Lorem Ipsum dolor sit ame</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<form action="Test_submit" method="get" accept-charset="utf-8">
<h3>Registration Form</h3>
<label for="first_name">First Name</label><input type="text" name="first_name" value="" id="first_name">
<label for="Email">Email</label><input type="text/submit/hidden/button" name="" value="" id="">
<label for="country">Country</label><input type="text/submit/hidden/button" name="country" value="" id="country">
<p><input type="submit" value="Submit" class="button"></p>
</form>
</div>
</body>
</html>
最佳答案
首先,在您发布之前消除所有的 js 错误。 当您在线发帖时尝试使用托管的 jQuery 链接,因为人们无法访问您的本地目录。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
在 head 部分添加类似这样的内容:
$(document).ready(function () {
$('ul.submenu').css({'display':'block'});
});
您可能想要更改选择器以使其更具动态性。我发布的只是给你一个想法。 另外,不要忘记更改子菜单项的 CSS。
关于javascript - 将最后一个 li 显示为已选中,最初显示其菜单项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14201293/