Question

我正在尝试将最后一个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>

Answer 1

首先，在发布之前摆脱所有js错误。在线发布时尝试使用托管的jQuery链接，因为人们无法访问您的本地目录。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

在头部添加如下内容：

$(document).ready(function () {
      $('ul.submenu').css({'display':'block'});
});

您可能希望更改选择器以使其更具动态性。我发布的内容只是为了给你一个想法。另外，不要忘记更改子菜单项CSS。

Answer 2

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

在下面这种情况下，“Products”菜单设置为“active”，“Web Page”SubMenu链接设置为“active-submenu”。

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

以上是“active”类的css代码。所有活跃的课程都有一个大胆的课程。

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

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

如果您对动态更改类感兴趣，可能需要使用javascript / jQuery“添加类”或“更改类”。如果您准备就绪，可以使用以下链接 - jquery change class name。

将最后一个li显示为最初选择显示其菜单项

2 个答案: