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

您可以通过CSS定位列表。查看 demo here 。请记住HTML中的评论为。

如果您没有引用:: active伪选择器，则可以将CSS更改为显示ul > li* > .active { }或ul > li*.active > a。页面上的选择器和样式元素有很多选项，但这里的想法是使用CSS，您可以使用<li>伪选择器定位每个:nth-child()。然后，您不必加载库（例如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; }

Answer 3

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活动

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

Answer 4

您可能希望在列表项中添加“有效”类。

$('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 5

请参阅以下代码：

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/

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

5 个答案: