如何动态更改网页所选菜单项的颜色？
Posted
技术标签:
【中文标题】如何动态更改网页所选菜单项的颜色？【英文标题】：How to dynamically change the color of the selected menu item of a web page? 【发布时间】：2011-06-04 21:48:56 【问题描述】：我是开发网页的新手。我希望创建类似于 ***.com 中的菜单（如上面显示的问题、标签、用户）。如何更改所选菜单的颜色（例如，“单击”时，问题的背景颜色变为橙色）？
我已经设法在悬停时更改颜色（使用 CSS），因为这很简单，但我遇到了麻烦。
我可以实现只使用 CSS 改变点击项颜色的效果吗？
【问题讨论】：
我认为人们有 %20 的机会会回答。 （尝试批准您的其他问题的答案，以提高您将来回答问题的机会。） 好吧，我不知道这个事实。我总是为我的答案投票。谢谢你告诉我。 【参考方案1】：设置类活动和悬停的样式：
你需要在服务器端激活 li。 所以在绘制菜单的时候，应该知道加载了哪个页面，并设置为：
<li class="active">Question</li>
<li>Tags</li>
<li>Users</li>
但是如果你在不重新加载的情况下改变内容，你不能改变设置服务器上的活动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>
.menuwidth: 300px; height: 25; font-size: 18px;
.menu lilist-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>
【讨论】：
感谢安泽的建议。我正在为静态页面做这件事。你能建议我如何使用 javascript 来做吗？ 你在使用任何 javascript 框架吗？喜欢 jQuery 或 MooTools？ 不。你建议我使用它们吗？如果是这样，哪个更容易学习？哪个更好？ 好吧，我们可以为此开战。大多数人使用 jQuery，很快就知道有一个巨大的已编写插件存储库。另一方面，我更喜欢 MooTools，我已经为 MooTools 编写了很多更大的插件，所以这就是我喜欢它的原因。如果您是新手，您可能应该使用 jQuery，因为社区更大。 是的，如果你想快速而敏捷地完成工作，你应该使用 js 框架。如果你想学习 js 的基础知识，有时会被它伤害（例如尝试拖放），那么你应该学习如何在没有任何框架的情况下编写 js，而不是开始使用框架。【参考方案2】：使用 JavaScript 实现这一点可能是最简单的......这是一个演示的 JQuery 脚本......正如其他人提到的......我们有一个名为“活动”的类来指示活动选项卡 - 而不是伪类“：活动。”我们可以很容易地将它命名为……选定的、当前的等等。
/* CSS */
#nav width:480px;margin:1em auto;
#nav ul margin:1em auto; padding:0; font:1em "Arial Black",sans-serif;
#nav ul lidisplay:inline;
#nav ul li atext-decoration:none; margin:0; padding:.25em 25px; background:#666; color:#ffffff;
#nav ul li a:hoverbackground:#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>
【讨论】：
我想我必须在我想要菜单的每个页面中复制您的代码。我的页面有点不同。换句话说，这是我的问题。如果我不清楚，请告诉我。基本上我有一个 3 帧的 html 页面。第 1 帧有菜单项，第 2 帧是标题，第 3 帧是第 1 帧中所选链接的内容加载位置。这是我的问题，我只需要更改第 1 帧中所选项目的颜色。 请不要介意我之前的评论。这是我在执行上面的代码后的推断。我观察到所选菜单项的颜色在单击时会发生变化（并且链接会在新窗口中打开），但是当我返回包含菜单的页面时，所选菜单项会立即失去其更改的颜色。我希望当前菜单项仅在单击另一个菜单项时返回其原始颜色。你能为这个效果推荐一些东西吗？ 我在这里使用的代码实际上是将活动类添加到当前 url，如果它是在链接的 href 属性中定义的......而不是在点击事件上......基本上它是什么说是......“如果网址与链接匹配，则将活动类添加到锚元素”至于在新窗口中打开......我不确定你在那里发生了什么...... 对不起，gravedig(?)，但我想指出，如果您在索引中（并且未显示基本名称），则此代码将不起作用。我通过从服务器获取当前 URL 并将其告知客户端来解决此问题。【参考方案3】：这个问题我迟到了，但这真的超级简单。您只需在 css 文件中定义多个选项卡类，然后在创建 LI 标记时将所需选项卡作为类加载到 php 文件中。
这是一个完全在服务器上执行的示例：
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
<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>
【讨论】：
【参考方案4】：假设你想改变当前选择的链接/标签的颜色...你最好的办法是应用一个类（比如active）到当前选择的链接/标签然后设置不同的样式。
示例样式可以是：
li.active, a.active
background-color: #f90;
【讨论】：
使用 active 仅有助于在单击并按住链接时在几分之一秒内改变颜色。我正在寻找一些技巧来使菜单项保持其更改的颜色，直到单击另一个菜单项。 @Jeeka 不是:active 伪类。只是一个值为active 的普通类。
@melhoseiny：你是否建议在我的 CSS li.active, a.active background-color: #f90; 中有这样的类，我将类分配给菜单的类我的html文件中有这样的项目吗？ 问题
但这不会动态改变背景颜色。所以，当我点击一个菜单项时，它会改变背景颜色，并且该颜色将永远保持，对吧？【参考方案5】：
我使用 PHP 查找 URL 并匹配页面名称（没有 .php 的扩展名，我也可以添加多个具有相同单词的页面，例如联系人、联系人表单等。所有页面都会添加该类) 并使用 PHP 添加一个类来更改颜色等。
为此，您必须使用文件扩展名 .php 保存您的页面。
这是一个演示。根据需要更改您的链接和页面。所有链接的 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-->
【讨论】：
【参考方案6】：试试这个。它保持颜色，直到单击另一个项目。
<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>
【讨论】：
【参考方案7】：我目前正在使用一个纯 CSS 解决方案。
添加标识您的页面和菜单项的正文 ID（或类），然后使用以下内容：
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：
.menu li:hover,
#body_questions #questions,
#body_tags #tags,
#body_users #users
background-color: #f90;
【讨论】：
感谢您的帮助。我对这个实现有疑问。我是否必须在每个页面中都有我的菜单（问题、标签、用户）。在这种情况下，有 3 个 html 文件，即 questions.html、tags.html 和 users.html ？所有这些 html 文件都应该有上面的代码（具有不同的 body id/class）吗？ 如果你可以使用像php这样的页面处理器，你可以将你的菜单代码发布在一个单独的文件中，并包含在每个页面中。如果没有，您将需要在任何地方重复它。但是在这两种情况下，是的，您必须只更改每个页面的正文 ID/类，所有页面的菜单片段都是相同的。 （对不起我的英语）【参考方案8】：在您的所有帮助和帖子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>
【讨论】：
以上是关于如何动态更改网页所选菜单项的颜色？的主要内容，如果未能解决你的问题，请参考以下文章