0

我试图将最后一个 li 显示为选定的，并且最初我需要显示它的子菜单项也被显示。

所以这是我尝试过的演示链接。

<!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>
4

2 回答 2

0

首先，在发布之前摆脱所有 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 进行更改。

于 2013-01-07T18:14:31.610 回答
0

为了在链接列表上显示活动选择，您需要更改每个页面的“活动”类。

在下面的这种情况下，“产品”菜单设置为“活动”，“网页”子菜单链接设置为“活动子菜单”。

<ul>
  <li><a href="home.html">Home</a></li>
  <li><a href="aboutus.html">About Us</a></li>
  <li class="submenuHeader active"><a href="products.html">Products</a>
    <ul class="submenu">
      <li class="active-submenu"><a href="webpage.html">Web Page</a></li>
      <li><a href="mobileapp.html">Mobile App</a></li>
    </ul>
  </li>
</ul>

这是上面“活动”类的css代码。其中所有活跃的班级都会有一个大胆的班级。

.active {
  font-weight: bold;
}
.active-submenu {
  font-weight: bold;
  color: blue;
}

因此，在您拥有的每个 .html 文件上，它会将具有“活动”类的人的外观更改为粗体。

如果您对动态更改类感兴趣，您可能需要使用 javascript/jQuery 来“添加类”或“更改类”。如果您准备好了，这里是链接 - jquery 更改类名。

于 2013-01-07T18:19:33.770 回答