导航栏，选中某一栏后的效果怎么做？

xuejianwings 2011-08-18 10:51:01



        <div id="nav">

            <ul>

                <li><a href="111.aspx">111</a></li>

                <li><a href="222.aspx">222</a></li>

                <li><a href="333">333</a></li>

            </ul>

        </div>



#nav ul li a:hover

{

	background-color:#D0E9F3;

}

选中导航栏其中一项后，选中项的效果怎么做？
给点简单的例子呗。谢谢

...全文

644 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

rofanliu1105 2011-09-05

打赏
举报

GingerJWS 2011-08-19

打赏
举报

+
[Quote=引用 4 楼 xiepnet 的回复:]

选中项可以用js添加一个class，然后在css里面设置这个class的样式就可以了
[/Quote]

xuejianwings 2011-08-19

打赏
举报

[Quote=引用 7 楼 happy175 的回复:]
$("#nav ul li").removeClass("Myselect");
$(this).addClass("Myselect");

上面的意思是，点击当前，加载Myselect这个样式，同时去除其它标签上的Myselect样式
[/Quote]

还是不行额

xuejianwings 2011-08-19

打赏
举报

[Quote=引用 8 楼 theforever 的回复:]
<head>
<title>theforever_csdn_导航栏效果示例</title>
<style>
#nav ul li a:hover
{
background-color:#D0E9F3;
}
.selected {background-color:red; }
</style>
<script type="text/javascript" charset="ut……
[/Quote]

用母版页。一刷新，效果都没了

yle_sjmr 2011-08-19

打赏
举报

你说的是动态选择符吧
a:link 未被访问过的链接
a:visited 访问过的链接(链接被点击后)
a:hover 鼠标移动到上面时
a:focus 获得焦点时
a:active 元素被激活时（被点击时）

用法都和a:hover相同,使用多个时要注意顺序

xuexiaodong2009 2011-08-18

打赏
举报

#nav ul li a:hover
{
background-color:#D0E9F3;
}
你这是鼠标移动上去的效果，其他的和着基本一样，只是不是hover罢了

赢在执行 2011-08-18

打赏
举报

这里几十个导航供你选择http://www.lanrentuku.com/js/daohang.html

碧海情天-赵亮 2011-08-18

打赏
举报

<head>
<title>theforever_csdn_导航栏效果示例</title>
<style>
#nav ul li a:hover
{
background-color:#D0E9F3;
}
.selected {background-color:red; }
</style>
<script type="text/javascript" charset="utf-8" src="http://jqueryjs.googlecode.com/files/jquery-1.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("#nav ul li a").click(function() {
$("#nav ul li a").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#" target="iframe名称">111</a></li>
<li><a href="#" target="iframe名称">222</a></li>
<li><a href="#" target="iframe名称">333</a></li>
</ul>
</div>
</body>

如果A链接直接链到某一其它URL，会因为跳转而看不到效果，所以应该用target指向要打开该URL的子容器（如ifrmae或frame）名称。

小真子 2011-08-18

打赏
举报

$("#nav ul li").removeClass("Myselect");
$(this).addClass("Myselect");

上面的意思是，点击当前，加载Myselect这个样式，同时去除其它标签上的Myselect样式

xuejianwings 2011-08-18

打赏
举报

[Quote=引用 4 楼 xiepnet 的回复:]
选中项可以用js添加一个class，然后在css里面设置这个class的样式就可以了
[/Quote]

能有个简单的例子么。大概这个意思我知道。但是具体的写不来。谢谢

xuejianwings 2011-08-18

打赏
举报

[Quote=引用 3 楼 mubeibei 的回复:]
HTML code
<!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-eq……
[/Quote]

a:visited 这个是访问过的，都会变。不是我需要的效果吧

xiepnet 2011-08-18

打赏
举报

选中项可以用js添加一个class，然后在css里面设置这个class的样式就可以了

MuBeiBei 2011-08-18

打赏
举报

<!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>无标题文档</title>



<style>#nav ul li a:hover

{

    background-color:#D0E9F3;

}

a:visited {background-color:#0F0; }

</style>

</head>







 <body>

  <div id="nav">

            <ul>

                <li><a href="111.aspx">111</a></li>

                <li><a href="222.aspx">222</a></li>

                <li><a href="333">333</a></li>

            </ul>

        </div>



 </body>

<script>



 </script>

</html>