Html 如何动态更改网页所选菜单项的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6239609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically change the color of the selected menu item of a web page?
提问by Jeeka
I am new to developing web pages. I am looking to create menus similar to the ones in stackoverflow.com (like Questions, Tags, Users shown above). How do I change the color of the selected menu (for example, the background color of the Question changes to orange when 'clicked')?
我是开发网页的新手。我希望创建类似于 stackoverflow.com 中的菜单（如上面显示的问题、标签、用户）。如何更改所选菜单的颜色（例如，“单击”时问题的背景颜色变为橙色）？
I have managed to change the color while hovering (using CSS) as that was simple, but I am having trouble with this.
我设法在悬停（使用 CSS）时更改颜色，因为这很简单，但是我遇到了麻烦。
Can I achieve this effect of changing the color of a clicked item using only CSS?
我可以仅使用 CSS 来实现更改单击项颜色的效果吗？
回答by Anze Jarni
Set the styles for class active and hover:
设置类 active 和 hover 的样式：
Than you need to make the li active, on the server side. So when you are drawing the menu, you should know which page is loaded and set it to:
比您需要在服务器端使 li 处于活动状态。所以当你在绘制菜单时，你应该知道加载了哪个页面并将其设置为：
<li class="active">Question</li>
<li>Tags</li>
<li>Users</li>
But if you are changing the content without reloading, you cannot change set the active li element on the server, you need to use javascript:
但是，如果您在不重新加载的情况下更改内容，则无法更改设置服务器上的活动 li 元素，您需要使用 javascript：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
.menu{width: 300px; height: 25; font-size: 18px;}
.menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
.menu li:hover, .menu li.active {
background-color: #f90;
}
</style>
</head>
<body>
<ul class="menu">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<script type="text/javascript">
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()
{
$(".menu li").click(make_button_active);
}
)
</script>
</body>
</html>
回答by Eddie B
It would probably be easiest to implement this using JavaScript ... Here's a JQuery script to demo ... As the others mentioned ... we have a class named 'active' to indicate the active tab - NOT the pseudo-class ':active.' We could have just as easily named it anything though ... selected, current, etc., etc.
使用 JavaScript 实现它可能是最简单的......这是一个演示的 JQuery 脚本......正如其他人提到的......我们有一个名为“active”的类来指示活动选项卡 - 而不是伪类：积极的。' 我们可以很容易地将它命名为任何东西，尽管......选择，当前等，等等。
/* CSS */
#nav { width:480px;margin:1em auto;}
#nav ul {margin:1em auto; padding:0; font:1em "Arial Black",sans-serif; }
#nav ul li{display:inline;}
#nav ul li a{text-decoration:none; margin:0; padding:.25em 25px; background:#666; color:#ffffff;}
#nav ul li a:hover{background:#ff9900; color:#ffffff;}
#nav ul li a.active {background:#ff9900; color:#ffffff;}
/* JQuery Example */
<script type="text/javascript">
$(function (){
$('#nav ul li a').each(function(){
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/')+1);
var url = $(this).attr('href');
if(url == current){
$(this).addClass('active');
};
});
});
</script>
/* HTML */
<div id="nav" >
<ul>
<li><a href='index.php?1'>One</a></li>
<li><a href='index.php?2'>Two</a></li>
<li><a href='index.php?3'>Three</a></li>
<li><a href='index.php?4'>Four</a></li>
</ul>
</div>
回答by Shonkho
I'm late to this question, but it's really super easy. You just define multiple tab classes in your css file, and then load the required tab as your class in the php file while creating the LI tag.
我对这个问题迟到了，但这真的非常简单。您只需在 css 文件中定义多个选项卡类，然后在创建 LI 标记时将所需选项卡作为类加载到 php 文件中。
Here's an example of doing it entirely on the server:
这是完全在服务器上执行此操作的示例：
CSS
CSS
html ul.tabs li.activeTab1, html ul.tabs li.activeTab1 a:hover, html ul.tabs li.activeTab1 a {
background: #0076B5;
color: white;
border-bottom: 1px solid #0076B5;
}
html ul.tabs li.activeTab2, html ul.tabs li.activeTab2 a:hover, html ul.tabs li.activeTab2 a {
background: #008C5D;
color: white;
border-bottom: 1px solid #008C5D;
}
PHP
PHP
<ul class="tabs">
<li <?php print 'class="activeTab1"' ?>>
<a href="<?php print 'Tab1.php';?>">Tab 1</a>
</li>
<li <?php print 'class="activeTab2"' ?>>
<a href="<?php print 'Tab2.php';?>">Tab 2</a>
</li>
</ul>
回答by ejaenv
Try this. It holds the color until another item is clicked.
尝试这个。它保持颜色，直到单击另一个项目。
<style type="text/css">
.activeElem{
background-color:lightblue
}
.desactiveElem{
background-color:none
}
}
</style>
<script type="text/javascript">
var activeElemId;
function activateItem(elemId) {
document.getElementById(elemId).className="activeElem";
if(null!=activeElemId) {
document.getElementById(activeElemId).className="desactiveElem";
}
activeElemId=elemId;
}
</script>
<li id="aaa"><a href="#" onclick="javascript:activateItem('aaa');">AAA</a>
<li id="bbb"><a href="#" onClick="javascript:activateItem('bbb');">BBB</a>
<li id="ccc"><a href="#" onClick="javascript:activateItem('ccc');">CCC</a>
回答by Jits
Assuming you want to change the colour of the currently selected link/tab... you're best bet is to apply a class (say active) to the currently selected link/tab and then style this differently.
假设您想更改当前选定的链接/标签的颜色……您最好的办法是将一个类（例如active）应用于当前选定的链接/标签，然后对其进行不同的样式设置。
Example style could be:
示例样式可以是：
li.active, a.active {
background-color: #f90;
}
回答by webestdesigns
I use PHP to find the URL and match the page name (without the extension of .php, also I can add multiple pages that all have the same word in common like contact, contactform, etc. All will have that class added) and add a class with PHP to change the color, etc.
For that you would have to save your pages with file extension .php.
我使用 PHP 来查找 URL 并匹配页面名称（没有 .php 的扩展名，我也可以添加多个页面，这些页面都具有相同的单词，如联系人、联系人表单等。所有页面都会添加该类）并添加使用 PHP 更改颜色等的类。为此，您必须使用文件扩展名保存页面.php。
Here is a demo. Change your links and pages as required. The CSS class for all the links is .taband for the active link there is also another class of .currentpage(as is the PHP function) so that is where you will overwrite your CSS rules.
You could name them whatever you like.
这是一个演示。根据需要更改您的链接和页面。所有链接的 CSS 类是.tab，对于活动链接，还有另一个类.currentpage（如 PHP 函数），因此您将在此处覆盖 CSS 规则。你可以随意命名它们。
<?php # Using REQUEST_URI
$currentpage = $_SERVER['REQUEST_URI'];?>
<div class="nav">
<div class="tab
<?php
if(preg_match("/index/i", $currentpage)||($currentpage=="/"))
echo " currentpage";
?>"><a href="index.php">Home</a>
</div>
<div class="tab
<?php
if(preg_match("/services/i", $currentpage))
echo " currentpage";
?>"><a href="services.php">Services</a>
</div>
<div class="tab
<?php
if(preg_match("/about/i", $currentpage))
echo " currentpage";
?>"><a href="about.php">About</a>
</div>
<div class="tab
<?php
if(preg_match("/contact/i", $currentpage))
echo " currentpage";
?>"><a href="contact.php">Contact</a>
</div>
</div> <!--nav-->
回答by morgar
There is a pure CSS solution I'm currently using.
我目前正在使用一个纯 CSS 解决方案。
Add a body ID (or class) identifying your pages and your menu items, then use something like:
添加标识您的页面和菜单项的主体 ID（或类），然后使用以下内容：
HTML:
HTML：
<html>
<body id="body_questions">
<ul class="menu">
<li id="questions">Question</li>
<li id="tags">Tags</li>
<li id="users">Users</li>
</ul>
...
</body>
</html>
CSS:
CSS：
.menu li:hover,
#body_questions #questions,
#body_tags #tags,
#body_users #users {
background-color: #f90;
}
回答by Jeeka
At last I managed to achieve what I intended with all your help and the post Change a link style onclick. Here is the code for that. I used JavaScript for doing this.
最后，在您的所有帮助和帖子Change a link style onclick 的帮助下，我设法实现了我的意图。这是代码。我使用 JavaScript 来做这件事。
<html>
<head>
<style type="text/css">
.item {
width:900px;
padding:0;
margin:0;
list-style-type:none;
}
a {
display:block;
width:60;
line-height:25px; /*24px*/
border-bottom:1px none #808080;
font-family:'arial narrow',sans-serif;
color:#00F;
text-align:center;
text-decoration:none;
background:#CCC;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom:0em;
padding: 0px;
}
a.item {
float:left; /* For horizontal left to right display. */
width:145px; /* For maintaining equal */
margin-right: 5px; /* space between two boxes. */
}
a.selected{
background:orange;
color:white;
}
</style>
</head>
<body>
<a class="item" href="#" >item 1</a>
<a class="item" href="#" >item 2</a>
<a class="item" href="#" >item 3</a>
<a class="item" href="#" >item 4</a>
<a class="item" href="#" >item 5</a>
<a class="item" href="#" >item 6</a>
<script>
var anchorArr=document.getElementsByTagName("a");
var prevA="";
for(var i=0;i<anchorArr.length;i++)
{
anchorArr[i].onclick = function(){
if(prevA!="" && prevA!=this)
{
prevA.className="item";
}
this.className="item selected";
prevA=this;
}
}
</script>
</body>
</html>
