javascript - 如何激活类 onclick 列表项

Question

我面临一个问题，我想添加类 onclick 意味着点击应该添加类。看我的图片

我通过 jquery 这样做：

$(function() {

$('.box li').click(function(){
    $('.box li').removeClass('submenu-active');

    $(this).addClass('submenu-active');

});

});

我的CSS是：

.aside ul li.submenu-active a {background-color:#df0000; color:#fff;}

我的子菜单代码是：

<ul class="box">
                <li class="submenu-active"><a href="create_financial_year.php">Create Financial Year</a></li>
                <li ><a href="select_financial_year.php">Select Financial Year</a></li>
                <li><a href="account_master.php">Account Master</a></li>
                <li><a href="bank_account_master.php">Bank Account Master</a></li> <!-- Active -->                  
                <li><a href="subscription_master.php">Subscription Master</a></li>
                <li><a href="subscription_fee_master.php">Subscription Fee Master</a></li>
                <li><a href="member_master.php">Member Master</a></li>                
                <li><a href="membership_suspension.php">Membership Suspension</a></li>
            </ul>

我真的花了这么多小时，但没有解决这个问题......它正在工作，但是当我离开时点击鼠标然后添加的类被删除...... 任何建议都会非常敏感......thanxxx

Answer 1

改用它：

演示

$(function () {

    $('.box li a').click(function (e) {
        e.preventDefault();
        $(this).closest('li').addClass('submenu-active').siblings().removeClass('submenu-active');
        //to load new content using ajax
        //you could wish to show user, some content is loading
        $('#myContainer').html('<img src="loading.gif>').load(this.href);
    });

});

您的 jsfiddle 的相应 CSS：

ul.box li.submenu-active {
    background-color:#df0000;
    color:#fff;
}

问题是，锚标签不会重定向到相应的页面，但我不知道你在寻找什么。

Answer 2

更改 .aside ul li.submenu-active a 为 li.submenu-active a

见演示。

Answer 3

function toggleColor() {
  var button = document.querySelector('a');
  button.classList.toggle('blue');
}
//if you only want to add a class instead of toggling one write the code below

function changeColor() {
  var button = document.querySelector('a');
  button.classList.add('blue');
}

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

a {
  padding: 15px 30px;
  color: #fff;
  background: #ff0fff;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.4s;
}

a.blue {
  background: #0f57ff;
  transition: background-color 0.4s;
}

<a onclick="toggleColor();">Click To Toggle Colors</a>