Question

我想使用jquery突出显示当前选定的菜单以下是我的jquery代码

＆＃13;

$('ul li a').click(function() {
  $('li').removeClass();
  $(this).parent().addClass('active');
});

＆＃13;

.active {
  background-color: #d90000;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Meetings</a>
    <div class="dropdown-content">
      <a href="/home/index" onclick="onBegin()">Meeting Overview</a>
      <a href="/usermeetings/index" onclick="onBegin()">Meeting Details</a>
    </div>
</ul>

＆＃13;

请帮忙

Answer 1

如果您尝试使用子菜单

$(document).ready(function(){
    if (localStorage.getItem('current_page')) {
        var page = localStorage.getItem('current_page');
        $('ul li').removeClass('active');
        $('ul li[data-page="'+page+'"]').addClass('active');
    }
});

$('ul li > a').click(function() {
   $('li').removeClass('active');
   $(this).parent().addClass('active');
   var page = $(this).parent().attr('data-page');
   localStorage.setItem('current_page', page);
});

Answer 2

＆＃13;

$('ul li a').click(function() {
  //$('li').removeClass();
  //$(this).parent().addClass('active');
     $(this).parent().addClass('active');
     $(this).parent().siblings().removeClass("active");
});

＆＃13;

.active {
  background-color: #d90000;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Meetings</a>
    <div class="dropdown-content">
      <li> <a href="javascript:void(1)" onclick="onBegin()">Meeting Overview </a> </li>
      <li> <a href="javascript:void(2)" onclick="onBegin()">Meeting Details </a> </li>
    </div>
</ul>

＆＃13;

Answer 3

在您的代码中，$（this）.parent（）是您的＆lt; li＆gt;元素仅在您点击第一个链接时，dropdown-content div下的链接没有＆lt; li＆gt; parent，所以，removeClass（）函数没有按预期工作。请更改此信息并告诉我们您的代码是否按预期工作。

Answer 4

试试这个

$('ul li a').click(function() {
  $(this).parent().addClass('active');
  $(this).parent().siblings().removeClass("active");
});

ul li{
    list-style-type:none;
    float:left;
    display:inline-block;
    margin:0 10px;
    padding:5px;
}
ul li.active{
  background:pink;
}
li a{
  text-decoration:none;
  outline:0;
}
ul li.active a{
  color:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
        <li class="dropdown">
             <a href="javascript:void(0)" class="dropbtn">Menu1</a>
        </li>
        <li class="dropdown">
             <a href="javascript:void(0)" class="dropbtn">Menu2</a>
        </li>
</ul>

Answer 5

这不能按预期工作。问题是，你单击链接（）当前的li elemet使类“活动”，然后页面刷新，因为链接重定向你，这将从当前的li元素中删除active类。

你可以做的是：

选项1：从网址

获取当前路径

当页面加载时，您可以提取路径并将active类添加到包含该链接的li：

$(document).ready(function() {
    var currentPath = window.location.pathname;
    $('a[href="'+currentPath+'"]').partent().addClass("active");
});

这将找到与currentPath的链接，并将类active添加到相应的li元素。

您还需要将所有链接包装在单独的列表元素中：

<ul>
    <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Meetings</a>
        <div class="dropdown-content">
            <ul>
                <li><a href="/home/index" onclick="onBegin()">Meeting Overview</a></li>
                <li><a href="/usermeetings/index" onclick="onBegin()">Meeting Details</a></li>
            </ul>
        </div>
    </li>
</ul>

选项2：将活动链接名称添加为“查询参数”

您可以在链接中添加查询参数，如下所示：

<li class="link home">
    <a href="/home/index?page=home" onclick="...">Meeting Overview </a>
</li>
<li class="link usermeetings">
    <a href="/usermeetings/index?page=usermeetings" onclick="...">Meeting Details </a>
</li>

在您的javascript中，您可以获取页面参数并添加active类，如下所示：

$(document).ready(function() {
    var page = $.url().param('page');
    $('.link').find('.' + page).addClass('active');
});

无法使用jquery将活动类添加到当前所选菜单

5 个答案: