css做的菜单，被选中状态的一个效果，很急，希望高手帮忙！！！ 10

各位高手，在下遇到一个问题，总是得不到解决，就是css做的菜单，我要点击其中一个选项，选中项呈不同颜色，再点击另一个选项，另一项呈被选状态，原先的那一项状态需要复原，这样... 各位高手，在下遇到一个问题，总是得不到解决，就是css做的菜单，我要点击其中一个选项，选中项呈不同颜色，再点击另一个选项，另一项呈被选状态，原先的那一项状态需要复原，这样的效果怎么实现，好像不是通过visited来实现的，visited只是定义被访问过的状态，就是说只要我菜单中的选项被点击过，都全部呈现被选过的状态，复原不了，它好像只是历史记录效果吧，定义被访问过的状态。好像这是需要js来实现的吧，谁能教教我啊，应为我对js不太了解~~~
如果能帮我解决，我追加分哦~~ 展开

 我来答

2个回答

#热议# 不吃早饭真的会得胆结石吗？

ranhouaini
2010-08-04 · 超过15用户采纳过TA的回答

知道答主

回答量：71

采纳率：0%

帮助的人：41.6万

我也去答题访问个人页

关注

展开全部

我这个只是实现你说的正在访问的文字有不同于其他文字的效果
用一个简单的js就可以

js里：

function xk(n){
for(var i=1;i<=6;i++){
var curB=document.getElementById("nav"+i);
if(n==i){
curB.className="active"
}else{
curB.className="none"
}
}
}

css里：加一个选中后的样式
.active{} /*he js里的curB.className="active"名称对应*/

菜单：

<ul>
<li onclick="return xk(1)" id="nav1" class="none"><a href="/">11111</a></li>
<li onclick="return xk(2)" id="nav2" class="none"><a href="/">22222</a></li>
<li onclick="return xk(3)" id="nav3" class="none"><a href="/">33333</a></li>
<li onclick="return xk(4)" id="nav4" class="none"><a href="/">44444</a></li>
<li onclick="return xk(5)" id="nav5" class="none"><a href="/">55555</a></li>
<li onclick="return xk(6)" id="nav6" class="none"><a href="/">66666</a></li>
</ul>

虽然代码可能有点麻烦但是可以实现

已赞过 已踩过<

评论收起

kghg123
2010-08-04 · TA获得超过536个赞

知道小有建树答主

回答量：902

采纳率：0%

帮助的人：856万

我也去答题访问个人页

关注

展开全部

下面的这个代码你应该能理解：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动TAB</title>
<script language="javascript">
function tabChange(obj,id)
{
 var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
 var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
 for(i=0;i<arrayul.length;i++)
 {
  if(obj==arrayli[i])
  {
   arrayli[i].className = "cli";
   arrayul[i].className = "";
  }
  else
  {
   arrayli[i].className = "";
   arrayul[i].className = "hidden";
  }
 }
}
</script>
<style type="text/css">
.tabbox {width:300px;height:250px;}
.tabmenu {width:295px;height:28px;border-left:1px solid  #CCC;border-top:1px solid #ccc;}
.tabmenu ul {margin:0;padding:0;list-style-type: none;}
.tabmenu li { text-align:center; float:left; display:block; width:58px; height:27px; overflow:hidden; background-color: #D2E8F7; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;}
.tabmenu .cli {text-align:center;float:left;display:block;width:58px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;}
#tabcontent {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}
#tabcontent ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden {display:none;}
</style>
</head>
<body>
 <div class="tabbox">
  <div class="tabmenu">
   <ul>
    <li onmouseover="tabChange(this,'tabcontent')" class="cli">军事</li>
    <li onmouseover="tabChange(this,'tabcontent')">娱乐</li>
    <li onmouseover="tabChange(this,'tabcontent')">国内</li>
    <li onmouseover="tabChange(this,'tabcontent')">国外</li>
    <li onmouseover="tabChange(this,'tabcontent')">游戏</li>
   </ul>
  </div>
  <div id="tabcontent">
   <ul name="tabul">
    <li><a href="#">1111111111111111111111</a></li>
    <li><a href="#">1111111111111111111111</a></li>
    <li><a href="#">1111111111111111111111</a></li>
    <li><a href="#">1111111111111111111111</a></li>
    <li><a href="#">1111111111111111111111</a></li>
    <li><a href="#">1111111111111111111111</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">2222222222222222222222</a></li>
    <li><a href="#">2222222222222222222222</a></li>
    <li><a href="#">2222222222222222222222</a></li>
    <li><a href="#">2222222222222222222222</a></li>
    <li><a href="#">2222222222222222222222</a></li>
    <li><a href="#">2222222222222222222222</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">3333333333333333333333</a></li>
    <li><a href="#">3333333333333333333333</a></li>
    <li><a href="#">3333333333333333333333</a></li>
    <li><a href="#">3333333333333333333333</a></li>
    <li><a href="#">3333333333333333333333</a></li>
    <li><a href="#">3333333333333333333333</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">4444444444444444444444</a></li>
    <li><a href="#">4444444444444444444444</a></li>
    <li><a href="#">4444444444444444444444</a></li>
    <li><a href="#">4444444444444444444444</a></li>
    <li><a href="#">4444444444444444444444</a></li>
    <li><a href="#">4444444444444444444444</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">5555555555555555555555</a></li>
    <li><a href="#">5555555555555555555555</a></li>
    <li><a href="#">5555555555555555555555</a></li>
    <li><a href="#">5555555555555555555555</a></li>
    <li><a href="#">5555555555555555555555</a></li>
    <li><a href="#">5555555555555555555555</a></li>
   </ul>
  </div>
 </div>
</body>
</html>


本回答被网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

css做的菜单，被选中状态的一个效果，很急，希望高手帮忙！！！ 10

其他类似问题

为你推荐：