Html 如何动态更改网页所选菜单项的颜色？_Html_Css_Background Color_Menu Items_Menuitem Selection

Html 如何动态更改网页所选菜单项的颜色？

html css

Html 如何动态更改网页所选菜单项的颜色？,html,css,background-color,menu-items,menuitem-selection,Html,Css,Background Color,Menu Items,Menuitem Selection,我对开发网页是新手。我希望创建类似stackoverflow.com中的菜单（如上面显示的问题、标签、用户）。如何更改所选菜单的颜色（例如，“单击”时问题的背景颜色将更改为橙色）我已经设法改变颜色，而悬停（使用CSS），因为这是简单的，但我有这个问题我是否可以仅使用CSS更改已单击项目的颜色，从而达到此效果？设置类活动和悬停的样式：您需要在服务器端激活li。因此，在绘制菜单时，您应该知道加载了哪个页面，并将其设置为： <li class="active">Question

我对开发网页是新手。我希望创建类似stackoverflow.com中的菜单（如上面显示的问题、标签、用户）。如何更改所选菜单的颜色（例如，“单击”时问题的背景颜色将更改为橙色）

我已经设法改变颜色，而悬停（使用CSS），因为这是简单的，但我有这个问题

我是否可以仅使用CSS更改已单击项目的颜色，从而达到此效果？

设置类活动和悬停的样式：

您需要在服务器端激活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>
  .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>


.菜单{宽度：300px；高度：25；字体大小：18px；}
.menu li{列表样式：无；浮点：左；右边距：4px；填充：5px；}
.menu li：悬停，.menu li.active{
背景色：#f90；
}

项目1
第2项
项目3
项目4
项目5
项目6

var make_button_active=函数（）
{
//获取项目同级
var sides=（$（this.sides（））；
//删除所有按钮上的活动类
兄弟。每个（函数（索引）
{
$（this.removeClass（'active'）；
}
)
//添加单击的按钮类
$（this.addClass（'active'）；
}
//将事件附加到菜单
$（文件）。准备好了吗(
函数（）
{
$（“.menu li”）。单击（激活按钮）；
}  
)

假设您想更改当前选定链接/选项卡的颜色。。。您最好将一个类（比如

active

）应用于当前选定的链接/选项卡，然后以不同的方式进行设置

示例样式可以是：

li.active, a.active {
  background-color: #f90;
}

使用JavaScript实现这一点可能是最简单的。。。下面是一个要演示的JQuery脚本。。。正如其他人提到的。。。我们有一个名为“active”的类来表示活动选项卡，而不是伪类：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>

/*CSS*/
#导航{宽度：480px；边距：1em自动；}
#导航ul{边距：1em自动；填充：0；字体：1em“Arial Black”，无衬线；}
#导航ulli{显示：内联；}
#nav ul li a{文本装饰：无；边距：0；填充：.25em 25px；背景：#666；颜色：#ffffff；}
#nav ul li a:悬停{背景：#ff9900；颜色：#ffffff；}
#nav ul li a.active{背景：#ff9900；颜色：#ffffff；}
/*JQuery示例*/
$（函数（）{
$（'#nav ul li a'）。每个（函数（）{
var path=window.location.href；
var current=path.substring（path.lastIndexOf（'/'）+1）；
var url=$（this.attr（'href'）；
如果（url==当前）{
$（this.addClass（'active'）；
};
});         
});
/*HTML*/

我使用PHP查找URL并匹配页面名称（没有.PHP扩展名，我还可以添加多个页面，所有页面都有相同的单词，如contact、contactform等。所有页面都将添加该类），并使用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-->


我目前正在使用一个纯CSS解决方案
添加一个标识页面和菜单项的主体ID（或类），然后使用以下方法：
HTML:
在你的帮助和帖子的帮助下，我终于达到了我的目的。这是代码。我使用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>


.项目{
宽度：900px；
填充：0；
保证金：0；
列表样式类型：无；
}
a{
显示：块；
宽度：60；
线高：25px；/*24px*/
边框底部：1px无#808080；
字体系列：“arial窄字体”，无衬线；
颜色：#00F；
文本对齐：居中；
文字装饰：无；
背景：#CCC；
边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
边缘底部：0em；
填充：0px；
}
a、 项目{
浮动：左；/*用于从左到右的水平显示*/
宽度：145px；/*用于保持相等*/
右边距：5px；/*两个方框之间的间距*/
}
a、 精选{
背景：橙色；
颜色：白色；
}
var anchorArr=document.getElementsByTagName（“a”）；
var prevA=“”；
对于（var i=0；i我回答这个问题已经晚了，但这真的非常简单。您只需在css文件中定义多个选项卡类，然后在创建LI标记时将所需的选项卡作为类加载到php文件中
下面是一个完全在服务器上执行此操作的示例：
CSS
PHP

>


试试这个。它会一直保持颜色，直到单击另一个项目为止
<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>


阿维耶伦先生{
背景颜色：浅蓝色
}       
D.desactiveElem{
背景色：无
}       
}
活性半乳糖；
功能激活项（elemId）{
document.getElementB
<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>

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;
}

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

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