如何动态地添加一个类到li项目，并使用javascript和css改变它的背景颜色

How to dynamically add a class to li item and change its background color using javascript and css

本文关键字：javascript css 颜色 背景 改变 li 添加 动态 何动态 一个 项目      更新时间：2023-09-26

这里我有一个列表，我想做的是我需要改变列表(li)的背景颜色为不同的一个后点击一个特定的列表项目。事情是一旦它点击链接页面将被重定向和刷新。我能提出一个解决方案吗?

<div id="main-menu">  
    <ul id="main-menu-list">      
      <li id="menu-home"><a href="main/home">Home</a></li>    
      <li id="menu-profile"><a href="main/profile">My Profile</a></li>
      <li id="menu-dashboard"><a href="main/db">My Dashboard</a></li>
      <li id="menu-search"><a href="main/search">Search</a></li> 
    </ul>
</div>

我为这个做了什么:

Java Script: 
var make_button_active = function()
{
  //Get item siblings
  var siblings =($(this).siblings());
  //Remove active class on all buttons
  siblings.each(function (index)
    {
      $(this).removeClass('active');
    }
  )
  //Add the clicked button class
  $(this).addClass('active');
}
//Attach events to menu
$(document).ready(
  function()
  {
    $("#main-menu li").click(make_button_active);
  }  
)
CSS: 
#main-menu-list li.active {
  background: #0040FF;
}

要确切地说出您想要做什么有点困难，但这里有一些快速而肮脏的(未经测试的)代码:

/// when we click on an `a` tag inside the `#main-menu-list`...
$('#main-menu-list').on('click', 'a', function(e) {
    // stop the link from firing
    e.preventDefault();
    e.stopPropagation();
    // change the list item's background to green
    $(this).closest('li').addClass('myClassName').css('background-color', 'green');
    // do anything else, e.g. load in pages via ajax...
});

你可以使用CSS来应用绿色背景色，而不是jQuery:

.myClassName { background-color: green; }

这将阻止页面导航，我不知道这是否是你的意图。如果您希望根据菜单检查当前加载的页面以查找当前项，您可以这样做(在页面加载时):

var currentPage = window.location.pathname;
$('#main-menu-list').find('a[href^="' + currentPage + '"]').closest('li').addClass('active');

编辑:

修改后的Javascript代码可以简化如下:

$('#main-menu li').on('click', 'a', function (e) {
    e.preventDefault();
    e.stopPropagation();
    // only do the following if the clicked link isn't already active
    if(!$(this).closest('li').hasClass('active')) {
        $(this).closest('ul').find('.active').removeClass('active');
        $(this).closest('li').addClass('active');
        // load in your content via ajax, etc.
    }
});

JSFiddle示例

对于每个页面，您可以向当前列表项添加一个类，其中包含"where the user is"..

CSS: 

.selectedItem{
     background-color: orange;//whatever color your want for the selected tab..
 }

对于每一页，

说你在Dashboard.html

你的菜单代码看起来像:

<div id="main-menu">  
 <ul id="main-menu-list">      
    <li id="menu-home"><a href="main/home">Home</a></li>    
    <li id="menu-profile"><a href="main/profile">My Profile</a></li>
    <li id="menu-dashboard" class="selectedItem"><a href="main/db">My Dashboard</a></li>
   <li id="menu-search"><a href="main/search">Search</a></li> 
 </ul>
</div>
在profile.html: 

<div id="main-menu">  
 <ul id="main-menu-list">      
    <li id="menu-home"><a href="main/home">Home</a></li>    
    <li id="menu-profile" class="selectedItem"><a href="main/profile">My Profile</a></li>
    <li id="menu-dashboard"><a href="main/db">My Dashboard</a></li>
   <li id="menu-search"><a href="main/search">Search</a></li> 
 </ul>
</div>

等等…

你需要在加载文档(即document.ready)时改变背景颜色。

那么你需要一个机制来连接当前加载的页面到你的列表项之一。

$(document).ready(function(){
    //get the url from the current location or in some other way that suits your solution
    //perhaps use window.location.pathname
    var moduleId = "dashboard" // hardcoded to dashboard to make the point :);
    $("#menu-"+moduleId).css("background-color", "#ccc");
});
http://jsfiddle.net/9JaVn/1/

相关文章：