1
4

5 回答 5

2

这是错误的：$(".art-hmenu>ul>li").on(

你应该有$("ul.art-hmenu>li").on(

在你的 htmlul元素中有 class .art-hmenu，所以你想要有ul.art-hmenu.

您可能希望像这样简化代码：

$(document).ready(function () {
    $("ul.art-hmenu>li").on("click", "a", function (event) {
        debugger;
        $("#menu_wrapper .active").removeClass("active");
        $(this).addClass("active");
    });
});

演示在这里

如果您正在寻找只是将该类添加到第一个<a>（而不是子菜单）考虑这个演示

于 2013-09-26T17:19:29.227 回答
0 
$(document).ready(function(){


$("li > a").click(function(){
$(this).addClass("active");

});

});
于 2014-12-19T21:27:48.867 回答
0

我建议的方法是在 ul 中添加一个带有 art-hmenu 类的事件监听器，并在所有锚标签上收听点击事件，然后在类 art-hmenu 的 ul 中查找任何具有 active 类的元素并删除该类和然后将活动类添加到单击的元素，如下所示

$(document).ready(function () {
  $(".art-hmenu").on("click", "a", function (event) { 
    $(".art-hmenu .active").removeClass("active"); 
    $(this).addClass("active"); 
  }); 
});
于 2013-09-26T17:57:59.857 回答
0

试试这个脚本：忘了提到这个代码需要在你的母版页上。

 $(document).ready(function() {


       $('.art-hmenu li').removeClass("active"); // if you want to style the li
       $('.art-hmenu li a').removeClass("active"); // if you want to style a specific a
       var pageTitle = window.location.pathname.replace( /^.*\/([^/]*)/ , "$1");

       ///// Apply active class to selected page link
        $('.art-hmenu a').each(function () {

            if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
                $(this).addClass('activ');// // if you want to style a specific a
                $(this).closest('li').addClass('active');// if you want to style the li
         });
 });
于 2013-09-26T17:33:17.250 回答
0

添加引导 CDN：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

HTML 代码

<div class="container">
    <ul class="nav nav-tabs">
        <li id="parentMenuId"><a href="#parentMenu">Parent Menu</a></li>
        <li id="childMenuId"><a href="#childMenu">Child Menu</a></li>
    </ul>

    <div id="parentMenu">
        <center>
            <div class="form-group">
                <h1>parent menu</h1>
            </div>
        </center>
    </div>

    <div id="childMenu">
        <center>
            <h1>child menu</h1>
        </center>
    </div>
</div>

jQuery代码

$(document).ready(function() {
    $("#childMenu").hide();
    $("#parentMenuId").addClass("active");

    $("#parentMenuId").click(function() {
        $("#parentMenu").show();
        $("#childMenu").hide();
        $("#parentMenuId").addClass("active");
        $("#childMenuId").removeClass("active");
    });

    $("#childMenuId").click(function() {
        $("#parentMenu").hide();
        $("#childMenu").show();
        $("#parentMenuId").removeClass("active");
        $("#childMenuId").addClass("active");
    });
});
于 2017-06-04T12:42:05.260 回答