javascript - 将最后一个 li 显示为已选中,最初显示其菜单项

标签 javascript jquery css

我试图将最后一个 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/

相关文章:

javascript - jQuery datepicker - 代码不起作用?

javascript - 按钮在 IE11 中不起作用

javascript - 时间或鼠标离开后的 JQuery .slideUp()

CSS 背景扩展到整个页面宽度

html - 为什么这些表格没有正确对齐?

Javascript 时间和工作日/周末 CSS 更改

javascript - Firebase 的云功能 : how to reference a key in a list that has been just pushed

javascript - 在 div 中搜索值

javascript - 下载从 onClick 方法返回的文件

javascript - 网页 javascript 根本不执行