Jquery - 如何向菜单链接添加不同的类/颜色

Question

我有一个菜单列表，我希望其中的每个 <li> 在“活动”时具有不同的背景颜色

<ul>
  <li> // this <li> should have blue background when active
    <a href="#">Link 1</a>
  </li>
  <li> // this <li> should have red background when active
    <a href="#">Link 2</a>
  </li>
  <li> // this <li> should have yellow background when active
    <a href="#">Link 3</a>
  </li>
  <li> // this <li> should have green background when active
    <a href="#">Link 4</a> 
  </li>
  <li> // this <li> should have orange background when active
    <a href="#">Link 5</a>
  </li>
</ul>

那么，我最好的方法是什么？

Answer 1

所以这里有一个快速代码，它可以帮助您了解它是如何工作的。您可以使用类来触发活动，或者您的意思是悬停。如果您不希望悬停在活动上方，则在 CSS 内更改活动上方悬停的位置。

<style type="text/css">
    #main_menu {list-style-type: none;} /* ul */
    #main_menu li {width: 100px; padding: 5px;}
    #main_menu li a {display: block; color: black; text-decoration: none;}

    /* Active static via the core program (PHP, CMS) */
    #main_menu li.active {background: black;}
    #main_menu li.active a {color: white;}

    /* Hover */
    #main_menu li:hover {background: blue;}
    #main_menu li:hover a {color: yellow;}

    /* Dynamic active */
    #main_menu li:active {background: green;}
    #main_menu li:active a {color: red;}
</style>
<ul id="main_menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<script type="text/javascript">
    $('#main_menu li a').click(function () {
        $(this).parent('li').toggleClass('active');
        return false; // Kills the link action
    });
</script>

^{[View output]}

现在我们知道了这个系统是如何工作的。我们可以添加您的自定义颜色：

<style type="text/css"> 
    #main_menu {list-style-type: none;} /* ul */
    #main_menu li {width: 100px; padding: 5px;}
    #main_menu li a {display: block; color: black; text-decoration: none;}

    /* Active */

    #main_menu li.first_item.active {background: blue;}
    #main_menu li.second_item.active {background: red;}
    #main_menu li.third_item.active {background: #FFFF00;}
    #main_menu li.fourth_item.active {background: green;}
</style>
<ul id="main_menu">
    <li class="first_item active"><a href="#">Home</a></li>
    <li class="second_item"><a href="#">Gallery</a></li>
    <li class="third_item"><a href="#">About</a></li>
    <li class="fourth_item"><a href="#">Contact</a></li>
</ul>
<script type="text/javascript">
    $('#main_menu li a').click(function () {
        $(this).parent('li').toggleClass('active');
        return false; // Kills the link action
    });
</script>

^{[View output]}

而且我感觉到，您希望它们具有不同的颜色，因为您有针对不同位置的重要链接。所以我也添加了 ID 的版本。所以你可以在ID下设置不同的样式，然后将它们用于活动状态。

<style type="text/css"> 
    #main_menu {list-style-type: none;} /* ul */
    #main_menu li {width: 100px; padding: 5px;}
    #main_menu li a {display: block; color: black; text-decoration: none;}

    /* Active */
    #main_menu li#home.active {background: blue;}
    #main_menu li#gallery.active {background: red;}
    #main_menu li#about.active {background: #FFFF00;}
    #main_menu li#contact.active {background: green;}
</style>
<ul id="main_menu">
    <li id="home" class="active"><a href="#">Home</a></li>
    <li id="gallery"><a href="#">Gallery</a></li>
    <li id="about"><a href="#">About</a></li>
    <li id="contact"><a href="#">Contact</a></li>
</ul>
<script type="text/javascript">
    $('#main_menu li a').click(function () {
        $(this).parent('li').toggleClass('active');
        return false; // Kills the link action
    });
</script>

^{[View output]}

对于跨浏览器问题，我不会使用nth-child(2) 方法。但是，您可以做的是将id="" 添加到这些 li 项目中。所以在 jquery 中您可以更好地使用它们，并且您可以从 css 中提取颜色:)

Answer 2

http://jsfiddle.net/59cvc/

$(document).ready(function(){
    $('li').on('click',function(){
        $('li').removeClass('active');
        $(this).addClass('active');
        $('.active').css('background-color',RandomColor);
    });
});

RandomColor = function() {
    colors = ['red', 'white', 'blue', 'green']
    return colors[Math.floor(Math.random()*colors.length)];
}

注意：如果您想通过 css 处理颜色，我从添加 Class active 开始

部分随机颜色在这里被盗：jQuery get random color from a given list 感谢 BernardoFire

Answer 3

您可能希望向列表项添加一个“活动”类。

$('li').on('click', function() {
   $(this).addClass('active');
}

在你的 CSS 中，你可以为每个 :nth-child(n) 定义一个特定的颜色

.active:nth-child(1){
     background-color: red;
}
.active:nth-child(2){
     background-color: blue;
}

Answer 4

见以下代码：

HTML

<ul>
  <li> 
    <a href="#">Link 1</a>
  </li>
   ...

CSS

ul li:first-child.active {
    background-color: red;
}

ul li:nth-child(2).active {
    background-color: blue;
}

ul li:nth-child(3).active {
    background-color: yellow;
}

ul li:nth-child(4).active {
    background-color: black;
}

JQUERY

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

一个例子：http://jsfiddle.net/UWwR5/

Answer 5

您可以通过 CSS 定位您的列表。请参阅 demo here。记住 HTML 中的 cmets 是 <!-- comment here -->。

如果您不是指 ::active 伪选择器，那么您可以更改 CSS 以显示 ul > li* > .active { } 或 ul > li*.active > a。页面上有很多选择器和样式元素的选项，但这里的想法是，使用 CSS，您可以使用 :nth-child() 伪选择器定位每个 <li>。然后，您不必加载库（例如 jQuery）或等待小脚本加载和处理（尽管 vanilla JS 非常苗条）。

HTML

<ul>
  <li> <!-- this <li> should have blue background when active -->
    <a href="#">Link 1</a>
  </li>
  <li> <!-- this <li> should have red background when active -->
    <a href="#">Link 2</a>
  </li>
  <li> <!-- this <li> should have yellow background when active -->
    <a href="#">Link 3</a>
  </li>
  <li> <!-- this <li> should have green background when active -->
    <a href="#">Link 4</a> 
  </li>
  <li> <!-- this <li> should have orange background when active -->
    <a href="#">Link 5</a>
  </li>
</ul>

CSS

ul > li:first-child  > a:active { background-color: blue; }
ul > li:nth-child(2) > a:active { background-color: red; }
ul > li:nth-child(3) > a:active { background-color: yellow; }
ul > li:nth-child(4) > a:active { background-color: green; }
ul > li:last-child   > a:active { background-color: orange; }