Question

这里我有一个列表，我想要做的是我需要在单击特定列表项后将列表（ 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脚本：

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;
}

Answer 1

要确切地说出你想要做什么有点困难，但这里有一些快速而肮脏（和未经测试）的代码：

/// 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 example

Answer 2

对于每个页面，您可以将类添加到当前列表项中，该列表项具有“用户所在的位置”..

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>

依旧......

Answer 3

您需要在加载文档时更改背景颜色（即在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/

如何使用javascript和css动态地向li项添加类并更改其背景颜色

3 个答案: