Javascript 如何使用JS函数动态更改列表的类

我想根据用户的点击动态地改变列表项的类别。我有一个菜单，我想将

.active

类仅分配给用户单击的菜单，并且最初主菜单必须是活动的

这是我的密码

函数activeclass（id）
{
document.getElementById（id）.className+=“活动”；
}

切换导航

@产量（‘标识’）

您需要从其他

li

中删除

活动类

，并添加当前单击的项目

试试这个

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

<script>
$(document).ready(function(){

    $('li').click(function(){

      // Step 1 - remove active class from all `li`
      $('li').removeClass('active');

      // Step 2 - add active class on currently clicked li
      $(this).addClass('active');
    });
});
</script>

$（文档）.ready（函数（）{
$（'li'）。单击（函数（）{
//步骤1-从所有'li'中删除活动类`
$（'li'）.removeClass（'active'）；
//步骤2-在当前单击的li上添加活动类
$（this.addClass（'active'）；
});
});

---

不要忘记包含jquery库。

您需要从其他

li

中删除

活动类

，并添加当前单击的项

试试这个

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

<script>
$(document).ready(function(){

    $('li').click(function(){

      // Step 1 - remove active class from all `li`
      $('li').removeClass('active');

      // Step 2 - add active class on currently clicked li
      $(this).addClass('active');
    });
});
</script>

$（文档）.ready（函数（）{
$（'li'）。单击（函数（）{
//步骤1-从所有'li'中删除活动类`
$（'li'）.removeClass（'active'）；
//步骤2-在当前单击的li上添加活动类
$（this.addClass（'active'）；
});
});

---

不要忘记包含jquery库。

使用Javascript，您可以使用以下代码：

var ul = document.getElementById("top-menu");
    var li = ul.getElementsByTagName("li");

    //Set the Home menu as active for first time
    li[0].classList.add("active");

    //add click event listener for each menu item, and add class active on current clicked menu item.   
    for(var i=0; i<li.length; i++){
        li[i].addEventListener("click", function(){
            removeActiveClass();
            this.classList.add("active");
        });
    }

    //Remove the active class from the menu items
    function removeActiveClass() {
        for(var i=0; i<li.length; i++){
            li[i].classList.remove("active");
        }
    }

var ul=document.getElementById（“顶部菜单”）；
var li=ul.getElementsByTagName（“li”）；
//首次将主菜单设置为活动
li[0]。类列表。添加（“活动”）；
//为每个菜单项添加click事件侦听器，并在当前单击的菜单项上添加类active。
对于使用Javascript的（var i=0；i，您可以使用以下代码：

var ul = document.getElementById("top-menu");
    var li = ul.getElementsByTagName("li");

    //Set the Home menu as active for first time
    li[0].classList.add("active");

    //add click event listener for each menu item, and add class active on current clicked menu item.   
    for(var i=0; i<li.length; i++){
        li[i].addEventListener("click", function(){
            removeActiveClass();
            this.classList.add("active");
        });
    }

    //Remove the active class from the menu items
    function removeActiveClass() {
        for(var i=0; i<li.length; i++){
            li[i].classList.remove("active");
        }
    }

var ul=document.getElementById（“顶部菜单”）；
var li=ul.getElementsByTagName（“li”）；
//首次将主菜单设置为活动
li[0]。类列表。添加（“活动”）；
//为每个菜单项添加click事件侦听器，并在当前单击的菜单项上添加类active。
对于（var i=0；i虽然有更好的方法来实现您想要的东西（比如@Jitendra Tiwari的答案或下面的示例），但我想指出代码中的问题

问题是您向函数
activeclass
传递了一个未知参数：
id

调试代码时，可以看到
id
参数为空：


您需要传递一个带有相关
id
的字符串参数：


函数activeclass（id）{
document.getElementById（id）.className+=“活动”；
}
.active{
背景：红色；
}

切换导航

@产量（‘标识’）






虽然有更好的方法来实现您想要的东西（如@Jitendra Tiwari的答案或下面的示例），但我想向您指出代码中的问题

问题是您向函数
activeclass
传递了一个未知参数：
id

调试代码时，可以看到
id
参数为空：


您需要传递一个带有相关
id
的字符串参数：


函数activeclass（id）{
document.getElementById（id）.className+=“活动”；
}
.active{
背景：红色；
}

切换导航

@产量（‘标识’）






试试这个方法

<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
    @yield('logo')
    <li id="home"><a href="{{ URL::route('index') }}" class="{{ \Request::route()->getName() == 'index' ? 'active' : '' }}">Home</a></li>
    <li id="aboutus"><a href="{{ URL::route('aboutus') }}" class="{{ \Request::route()->getName() == 'aboutus' ? 'active' : '' }}">About Us</a></li>
    <li id="products"><a href="{{ URL::route('products') }}" class="{{ \Request::route()->getName() == 'products' ? 'active' : '' }}">Products</a></li>
    <li id="gallery"><a href="{{ URL::route('gallery') }}" class="{{ \Request::route()->getName() == 'gallery' ? 'active' : '' }}" >Gallery</a></li>           
    <li id="contactus"><a href="{{ URL::route('contactus') }}" class="{{ \Request::route()->getName() == 'contactus' ? 'active' : '' }}">Contact</a></li>
</ul>


@产量（‘标识’）






试试这个方法

<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
    @yield('logo')
    <li id="home"><a href="{{ URL::route('index') }}" class="{{ \Request::route()->getName() == 'index' ? 'active' : '' }}">Home</a></li>
    <li id="aboutus"><a href="{{ URL::route('aboutus') }}" class="{{ \Request::route()->getName() == 'aboutus' ? 'active' : '' }}">About Us</a></li>
    <li id="products"><a href="{{ URL::route('products') }}" class="{{ \Request::route()->getName() == 'products' ? 'active' : '' }}">Products</a></li>
    <li id="gallery"><a href="{{ URL::route('gallery') }}" class="{{ \Request::route()->getName() == 'gallery' ? 'active' : '' }}" >Gallery</a></li>           
    <li id="contactus"><a href="{{ URL::route('contactus') }}" class="{{ \Request::route()->getName() == 'contactus' ? 'active' : '' }}">Contact</a></li>
</ul>


@产量（‘标识’）






类似于
.active{background:red}
？到底是什么问题？上面是我做的代码…它不起作用..我遗漏了一些..不知道什么是
.active{background:red}
？到底是什么问题？上面是我做的代码…它不起作用..我遗漏了一些东西..不知道什么显示类型错误：ul在InspectElement中为null您确定为ul添加了id“顶部菜单”吗？显示类型错误：ul在InspectElement中为null您确定为ul添加了id“顶部菜单”吗？