如何实现导航栏中 当前栏目的样式 和 非当前栏目不同?

请看问题详细说明 :
需要的结果是,如果是当前栏目,栏目背景变为黑色,字体为白色,其它非当前栏目就灰色背景,黑色字。且点击后这个样式要保留(黑底白字,这个是重点,不是简单的鼠标滑过效果)

再点击其它栏目后,此样式才换到被点击的栏目下。

补充一下,鼠标滑过样式可以和些样式同时出现
例如: 点击公司快报后,当前栏目为 黑底白字, 鼠标“滑过”其它栏目时,公司快报 这个栏目 样式是不变的,在点击其它栏目后 黑底白字 的样式才换到被点击的栏目下。

这个样式用的比较多,也看了一些别人写的样式,自己用的时候总是会不完整。在线座等,欢迎大神给出标准意见。谢谢!
求答案呀!

第1个回答  2013-07-19
楼上的 敢问点击链接后页面一般会发生跳转吧 跳转相当于刷新了 那么你这js的点击效果相当于无效了。除非是iframe或者框架结构的。所以我觉的这个是要跟后台语言代码结合吧
第2个回答  2013-07-18

拿鼠标移上跟当前效果一样举例:

html代码:

<ul class="navi">
    <li class="current"><a href="##">公司简介</a></li>
    <li><a href="##">公司快报</a></li>
    <li><a href="##">人才招聘</a></li>
    <li><a href="##">公约</a></li>
</ul>

css代码:

.navi li a { padding: 5px 10px; width: 160px; color: #999; background: #ccc; display: inline-block;text-decoration: underline;}
.navi li a:hover { color: #fff; background: #000;}
.navi li.current a {color: #fff; background: #000;}

js代码:

$(".navi li a").click(function(){
    $(".navi li").removeClass("current");
    $(this).parent().addClass("current");
})

有啥问题追问!!!!

追问

用你的JS 会出现点人才招聘后,公司简介这项黑底还在,不会消失,正常这里应该没有的,且鼠标移走或点页面空白的地方,人才招聘这里的背景就没有了,这两处有点问题!

追答

js代码里面的removeClass加了?默认的html代码里面没有current(注),后面一个不是很明白;

追问

能把你的JS 代码 写完整吗? 其它地方是复制你这个的
鼠标移走 或是 点页面空白的地方,人才招聘这里的背景就没有了(就是消失了),但是上面的还有,具体点一下就知道了

方便 加个QQ吗?

追答

js代码:

<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
    $(function(){
    $(".navi li a").click(function(e){
    $(".navi li").removeClass("current");
    $(this).parent().addClass("current");
    return false;
    e.stopPropagation();
    e.preventDefault();
})
$("body").click(function(){
    $(".navi li").removeClass("current");
})
})
</script>

css,html没啥变化

抖音底部导航栏怎么设置?怎么修改首页的栏目?
进入底部导航栏设置:在设置页面中,您需要向下滑动,找到一个名为"底部导航栏"的选项,并点击进入该选项。设置底部导航栏:在底部导航栏设置页面,您可以看到默认的底部导航栏按钮列表。您可以通过拖动按钮进行排序,点击按钮右侧的开关来决定是否显示该按钮。完成设置:完成底部导航栏的设置后,点击页面右上...

如何实现导航当前高亮如何实现导航当前高亮模式
一、先定义一个CSS,比如:.changebg{background-color:#FFCC00;} 二、给导航所在的区域设置ID,这个区域我不知道你是怎么做的,比如p,td或li等,但都要设置ID,比如分别为:sy,gsjj,gsxw 三、每个页都有页名 高德地图怎么调出行政区划?点击高德地图的某块区划获取点击点击的区划名称追加到右侧待...

dede织梦导航 点击当前栏目 改栏目高亮显示不正确
这个情况光标指示的栏目是对的,也就说现在这个栏目应该是新闻中心,只是新闻中心对应的模板变成产品中心的了。检查一下后台-网站栏目管理-新闻中心,新闻中心后面有个更改按钮,点进去修改一下现在的栏目页模板为新闻中心的就行了

如何用js判断不同的网址而给导航栏目使用不同的样式?
location.href获取url,提取出需要的部分。根据提取出的字符串动态的为li列表添加class

如何让dedecms当前栏目或者当前栏目所属的顶级栏目排首位??
栏目五 下面的 所有页面 导航栏是这个样子的就是当前 内容所属的顶级栏目排在 第一位!!是怎么做到啊??求指点 展开  我来答 分享 微信扫一扫 网络繁忙请稍后重试 新浪微博 QQ空间 举报 浏览19 次 可选中1个或多个下面的关键词,搜索相关资料。也可直接点“搜索资料”搜索整个问题。 dedecms 当前栏目 ...

织梦导航栏样式如何替换?
(4)把新的导航,用HTML代码+CSS都套进来。先不写你的网站的内容,仅仅只是静态的放进来了。(5)按照(1)的方法,找到HTML栏目的名字和链接的调用方法(栏目的关键字为:channelid,搜索即可)(6)调试多浏览器兼容,优化JS、css PS:这里提一句(3)是可以不用做的,但会有CSS冗余不方便日后...

教程日记:如何自定义修改WordPress的导航栏
1、首先你必须建立网站的导航菜单,进入WordPress后台,点击“外观”》“菜单”》“创建新菜单”,然后在“菜单名称”上输入名称,如“数字宝藏教学菜单”,最好点击“创建菜单”即可。2、当你完成了菜单的创建工作之后,你就可以对菜单的层级进行设置,在左边栏你可以选择菜单的相应层级。在一般情况下,...

css导航条判断当前页面高亮效果显示
一般当前高亮都是后台程序判断实现的,不是css做的,要用css做也行,只是麻烦点,要给每个栏目的加上ID,这样做造成的麻烦是弄后台程序的时候不能把这行直接写入页头包含文件之中:下面代码每个body都有自己的ID来识别当前是什么栏目,导航栏每个li也加了class:---首页html--- 首页 介绍 新闻 ...

网页设计中导航栏须知的十大事项?
1、千万不要太花哨,它属于功能物件,喧宾夺主就不好了。2、导航不多的情况下,一般就只有一排,横竖都可以,但其实如果考虑到美观,栏目超过6个就可以考虑用两排。3、如果遇到导航栏目很多的情况,设计师也可以进行多排,甚至可以使用不规则的多排(一排个数不同,或长度不同)。商业设计或门户站点...

在使用博达软件网站群产品时,如何在相同的模板上,显示不同的栏目...
当不同的栏目引用相同的模板,同时又希望点到每一个栏目,在栏目页面上会显示相应的栏目名称,如何设置?这时会用到栏目装饰组件。第一步:在栏目装饰组件中选择组件(可以选择装饰图片组件和装饰文字组件),拖放到模板的相应位置;第二步:点击栏目管理,点击要引用此模板的栏目,点击“导航与装饰”,在...

相似回答