我有一个菜单列表，我希望它们中的每个<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>
那么，我最好的方法是什么？
答案 0 :(得分：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>
现在我们知道这个系统是如何工作的。我们可以添加您的自定义颜色：
<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>
我感觉到，您希望它们具有不同的颜色，因为您拥有适用于不同位置的重要链接。所以我也添加了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>
对于跨浏览器的问题，我不使用nth-child(2)方法。但是，你可以做的是将id=""添加到那些li项目中。所以在jquery中你可以更好地使用它们，从css你可以拉出颜色：）
答案 1 :(得分：0)
您可以通过CSS定位列表。查看 demo here 。请记住HTML中的评论为<!-- comment here -->。
如果您没有引用:: 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; }
答案 2 :(得分：0)
$(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
答案 3 :(得分：0)
您可能希望在列表项中添加“有效”类。
$('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;
}
答案 4 :(得分：0)
请参阅以下代码：
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');
});