2 rickiyeat rickiyeat 于 2016.09.24 21:01 提问

关于js,css的一个问题

怎样实现这个导航菜单?
功能:点击导航其中一个栏目变色,再点击页面其他地方,导航没有变化
点击导航另一个栏目变色,并且之前的栏目恢复到未点击之前的状态

h5:

 <html>
<head>
    <link href="navigation.css" rel="stylesheet" type="text/css" />
    <script language="javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
$(function(){
    $(".menu a").focus(function(){

        $(this).addClass("cur").siblings().removeClass("cur");
    })
})
</script>
</head>
<body>
  <div class="menu">
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <del></del>
  </div>
</body>
</html>

css:

.menu a{
    display:block;
    float:left;
}
.menu
{
    font-size:14px; 
    line-height:14px;
    background:url("image/navigation/bg1.jpg") repeat-x left bottom;
    background-color:#f7f7f7;
    margin-bottom:24px;
    font-family:"Arial","Tahoma","微软雅黑","黑体";
    line-height:18px;
    padding:0px;
    margin:0px;
    text-align:center;
}
.menu a:link,.menu a:visited
{
    color:#383737;
    background-color:#f7f7f7;
    border-bottom:solid 2px #e6e6e6;    
    text-decoration:none;
    padding:10px 16px 10px 16px;
}
.menu a:hover,.menu a:focus
{
    background-color:#646464;
    border-bottom:solid 2px #2e2e2e;
    color:#fff;
}
.cur
{
    background-color:#646464;
    border-bottom:solid 2px #2e2e2e;
    color:#fff;
}

10个回答

qq_15617533
qq_15617533   2016.09.26 00:39
已采纳
 <html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link href="navigation.css" rel="stylesheet" type="text/css" />
    <script language="javascript" src="jquery.js"></script>
    <script type="text/javascript">
$(function(){
  $(".menu a").click(function(event){
  var target = event.target;
  $(target).css("background-color","#646464").siblings().css("background-color","#ffffff");
  })
})
</script>
</head>
<body>
  <div class="menu">
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <del></del>
  </div>
</body>
</html>

showbo
showbo   Ds   Rxr 2016.09.25 11:40

楼主你的连接href是有地址的吧,而不是死链接,发生了跳转刷新的话这个代码没用,可以看这个:网站导航栏目焦点设置

qq_29594393
qq_29594393   Ds   Rxr 2016.09.24 21:42
        $(".menu a").bind({
              focus:function(){$(this).toggleClass("red")},
              blur:function(){$(this).removeClass('red')}
        });
qq_29594393
qq_29594393 回复Lovnx: 看错了。。。
接近 2 年之前 回复
rickiyeat
rickiyeat 回复当作看不见: 类能给标签添加上,但是一点页面其他地方还是变了
接近 2 年之前 回复
qq_29594393
qq_29594393 你改一下类名就好
接近 2 年之前 回复
franks_t_d
franks_t_d   2016.09.24 22:08
$(function() {
    var events = {
        change: function(event) {
            var that = $(this),
                cur = event.data.current;
            that.addClass("cur").siblings().removeClass("cur");
        }
    }
    $(".menu").on("click", "a", {current: 'cur'}, events.change);
})
franks_t_d
franks_t_d   2016.09.24 22:12
上面漏替换变量了,这个是正确的。
$(function() {
    var events = {
        change: function(event) {
            var that = $(this),
                cur = event.data.current;
            that.addClass(cur).siblings().removeClass(cur);
        }
    }
    $(".menu").on("click", "a", {current: 'cur'}, events.change);
})
rickiyeat
rickiyeat 类能添加上,但是一点页面其他地方还是变了
接近 2 年之前 回复
franks_t_d
franks_t_d   2016.09.24 22:28

另一种组件化写法:
var changeColor = function(options) {
var config = {
trigger: '.menu',
target: 'a',
current: 'cur',
event: 'click'
};
var opts = $.extend({}, config, options);
$(opts.trigger).on(opts.event, opts.target, function(event) {
var that = $(this);
that.addClass(opts.current).siblings().removeClass(opts.current);
});
};
//实例化
new changeColor({
trigger: '.menu',
target: 'a',
current: 'cur',
event: 'click'
})

qq_29594393
qq_29594393   Ds   Rxr 2016.09.24 23:41

ok了

       $(.menu"a").bind({
              click:function(){
                $(.menu a').removeClass("cur")
                $(this).addClass("cur")
                }
        });
franks_t_d
franks_t_d 回复franks_t_d: 所以当你点击的元素和当前元素是同一个时,体验不会友好,所以推荐用.siblings()或者.not(this)排除下点击的元素
接近 2 年之前 回复
franks_t_d
franks_t_d 你的这个写法也算对,但是比较暴力,你是先对所有a元素进行样式移除,包括自己被点击的a元素。
接近 2 年之前 回复
rickiyeat
rickiyeat 回复当作看不见: 大哥,要不你执行一下这段代码,真不行,一点真好其他地方,不点导航,就啥都没有了,..,=_=
接近 2 年之前 回复
qq_29594393
qq_29594393 回复Lovnx: 你的这个不行,就是闪烁一下,我写的可以达到效果
接近 2 年之前 回复
rickiyeat
rickiyeat $(".menu a").click(function(){ $(this).addClass("cur").siblings().removeClass("cur"); })
接近 2 年之前 回复
qq_15617533
qq_15617533   2016.09.26 00:37






<br> $(function(){<br> $(&quot;.menu a&quot;).click(function(event){<br> var target = event.target;<br> $(target).css(&quot;background-color&quot;,&quot;#646464&quot;).siblings().css(&quot;background-color&quot;,&quot;#ffffff&quot;);<br> })<br> })<br>





把css属性转化为你想要的class,class样式自己定义,我想这难不住你吧
qq_15617533
qq_15617533   2016.09.26 00:38






<br> $(function(){<br> $(&quot;.menu a&quot;).click(function(event){<br> var target = event.target;<br> $(target).css(&quot;background-color&quot;,&quot;#646464&quot;).siblings().css(&quot;background-color&quot;,&quot;#ffffff&quot;);<br> })<br> })<br>





把css属性转化为你想要的class,class样式自己定义,我想这难不住你吧
qq_15617533
qq_15617533   2016.09.26 00:40

把css属性转化为你想要的class,class样式自己定义,我想这难不住你吧

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
css、js缓存问题
目前开发新需求,经常服务器发布文件后要不断的刷新页面或者过很长时间,页面上的CSS和JS文件才能生效,特别对于目前做微信公众号的时候,微信内置的浏览器缓存非常的严重。但是目前项目中没有任何处理缓存的机制,导致在开发中明明更改了样式或者脚本但是就是没有任何效果,只能不停刷新、清缓存,非常坑爹!浏览器缓存的意义在于提高了执行效率,但是导致服务端修改了js、css,客户端不能及时更新。你每次发布一个新的
CSS中关于定位的那些问题
今天在写一个页面的时候,想通过margin:0 auto;来对一个元素进行水平居中,结果发现无法实现,但是当我把定位改成绝对定位以后又可以实现了。然后我发现如果我想对绝对定位的元素实现水平居中的话除了设置margin:auto 以外还需要吧left和right都设置为0; 遂复习一下CSS里的定位 absolute 生成绝对定位的元素,相对于 static 定
html中css和js引用的路径问题
今天写的项目出现了一个怪事,在前台新增员工页面没有问题,但是点击提交后,再次跳到该页面就发现css和js加载不了之后的“光溜溜的原型”页面。大感诧异下,问了领导。原来是url的路径导致的。 我是通过主页中的click()方法window.location来跳转到add页面中的,然后通过点击新增按钮,走了后台来进入add页面。这样就导致了两者的nur不相同。前者的是在add页面所在的目录,而后者则
web网页设计
html,js,css,mysqli,关于一个静态和动态网页的设计
关于引用JS和CSS刷新浏览器缓存问题
有时候我们会碰到上线的新版本都要刷新一次缓存的问题。那是因为改了JS的内容,但是JSP引用的地方后面的字符串未发生改变导致浏览器读取浏览器缓存而不会重新加载新的JS内容,以下提供两种解决方式: 1.每次上线会更新一个版本号,用版本号作为引用的字符串: 2.每次修改了一个新的js,在引用此js的地方更新日期编号: web网站css,js更新后客户浏览器缓存问题,需要刷新才能正常展示
HTML+CSS面试题
1.对WEB标准以及W3C的理解与认识? (1)web标准规范要求,书写标签必须闭合、标签小写、不乱嵌套,可 提高搜索机器人对网页内容的搜索几率; (2)建议使用外链css和js脚本,从而达到结构与行为、结构与表现的 分离,提高页面的渲染速度,能更快地显示页面的内容; (3)样式与标签的分离,更合理的语义化标签,使内容能被更多的用户 所访问、内容能被更广泛的设备所访问、更少的代码和组件
星星打分JS
关于JS的星星打分程序,JS,css一个页面,点击滑动都有效果。
java web项目发版js或css缓存问题解决方案
java web项目发版js或css缓存问题解决方案 给引入的js或css文件加版本号 如  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";     // 加载资源文件     Properti
如何解决HTML5页面js,css缓存问题
我们开发web项目的时候,如果更新了某个css文件,部署到服务器,发现在浏览器访问的时候,并没有什么变化,这是因为浏览器缓存了之前的旧的css文件。如果过一段时间之后再访问,就会发现页面有了变化,这说明浏览器更新了最新的css文件。 那么怎么才能使我们修改的css或js文件立马生效呢? 如果每次都强制更新最新的文件,这样做从效率上来讲又不是很好。我们还是希望有缓存的,只是当我们修改了文件之后,
HTML+CSS项目答辩遇到的问题锦集(一)——Bootstrap最基本最简单的模板
Bootstrap最基本最简单的模板