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

Posted 2023-05-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css做的菜单，被选中状态的一个效果，很急，希望高手帮忙！！！相关的知识，希望对你有一定的参考价值。

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

参考技术A 我这个只是实现你说的正在访问的文字有不同于其他文字的效果
用一个简单的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>

虽然代码可能有点麻烦但是可以实现参考技术B 下面的这个代码你应该能理解：

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

如何用html5实现左侧是滚动菜单，选中后右边呈现效果

参考技术A

这问题好纠结，最少来个截图啊，给你写个吧，粘过去就行，不行的话留个q，继续问

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选项卡</title>
<style type="text/css">
::-webkit-scrollbarwidth:0px
* margin:0; padding:0
ul
list-style: none;

.tab
width: 600px;
margin: 80px auto;

.tab .tab_menu
float:left;
height: 138px;
width: 90px;
overflow-y:scroll;

.tab .tab_menu ulwidth:60px;
.tab .tab_menu ul li

width: 60px;
text-align: center;
line-height: 30px;

.tab .tab_menu ul li:last-child
border-right:none;
width:60px;

.tab .tab_menu ul li.on
background: #999;

.tab_boxfloat:left;
.tab .tab_box > div
width: 300px;
height: 138px;
border:1px solid #6cf;
display: none; //将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来

.tab .tab_box > div:first-child
display: block;

</style>
</head>
<body>

<div class="tab">
<div class="tab_menu">
<ul>
     <li class="on">实事</li>
     <li>政治</li>
     <li>体育</li>
     <li>实事</li>
     <li>政治</li>
     <li>体育</li>
     <li>实事</li>
     <li>政治</li>
     <li>体育</li>
     <li>实事</li>
     <li>政治</li>
     <li>体育</li>
</ul>
</div>
<div class="tab_box">
     <div>实事内容</div>
     <div>政治内容</div>
     <div>体育内容</div>
     <div>实事内容</div>
     <div>政治内容</div>
     <div>体育内容</div>
     <div>实事内容</div>
     <div>政治内容</div>
     <div>体育内容</div>
     <div>实事内容</div>
     <div>政治内容</div>
     <div>体育内容</div>
</div>
</div>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
$(".tab_menu ul li").click(function()
$(this).addClass("on").siblings().removeClass("on"); //切换选中的按钮高亮状态
var index=$(this).index(); //获取被按下按钮的索引值，需要注意index是从0开始的
$(".tab_box > div").eq(index).show().siblings().hide(); //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容
);
);
</script>
</body>
</html>

本回答被提问者采纳

以上是关于css做的菜单，被选中状态的一个效果，很急，希望高手帮忙！！！的主要内容，如果未能解决你的问题，请参考以下文章

如何用CSS 设置当鼠标移动到菜单时,该按钮变色,鼠标点击后，页面停留在鼠标滑过时的状态！！很急！

急急~~关于css控制 tab菜单选中状态的问题

用jquery ajax做的select菜单，选中的效果

C#WInform 如何让菜单栏中只能有一个菜单项被选中，其他的不选中，当选择中其他的时，选中的为选中状态！

div css,关于li中链接当前选中效果的问题。

vue 刚加载的菜单无法渲染选中效果