JS或Jquery动态改变导航栏样式

js怎么实现点击一个按钮时样式改变，直到点击下一个按钮时原先的样式没有，当前按钮显示那个样式。我用的方法是：functionchangeStyle(){$(“#menu1... js怎么实现点击一个按钮时样式改变，直到点击下一个按钮时原先的样式没有，当前按钮显示那个样式。
我用的方法是：function changeStyle(){
$(“#menu1”).attr("class","样式");
}
这个是在点击的时候改变，而不是点击后
求解！！！！！展开

 我来答

3个回答

#合辑# 机票是越早买越便宜吗？

dongdng
推荐于2018-05-04 · TA获得超过8158个赞

知道大有可为答主

回答量：9168

采纳率：88%

帮助的人：2309万

我也去答题访问个人页

关注

展开全部

简单的插件代码如下：
<!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 type="text/css">

</style>
<script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.dynamicNav=function(options){

//默认配置
var defaults = {
direction:"up", //动画切换方向，总共4种up 、down 、left 、right
duration:100 //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
};

// 覆盖默认配置
var opts = $.extend(defaults, options);

this.each(function(){
var navList=$(this).find("li"),
navLink=navList.find("a");

//在a标签外侧插入span
navList.wrapInner("<span></span>");

var span=navLink.parent();

//判断是否垂直切换
if(opts.direction=="up" || opts.direction=="down"){
var v=true;
}

//判断是否改变span初始位置及a样式
if(opts.direction=="right" || opts.direction=="down"){
var restSpan=true;
}

navLink.each(function(){

//获取a高度和宽度
var w=$(this).outerWidth(),
p=$(this).parent();

//初始复制现有a标签
$(this).clone().appendTo(p).addClass("over");

//如果是垂直切换
if(v){
p.css("width",w);
}else{
p.css("width",2*w).parent().css("width",w);
}

});

//如果向右或向下切换，改变span初始位置及a样式
if(restSpan){
span.each(function(){

if(opts.direction=="right"){
$(this).css({"margin-left":-$(this).outerWidth()/2});
}

if(opts.direction=="down"){
$(this).css({"margin-top" : -$(this).outerHeight()/2});
}

$(this)
.find('a')
.last()
.removeClass("over")
.prev()
.addClass("over");
});
}

//鼠标经过时动画函数
function over(o){
o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.duration);
}

//鼠标移开时动画函数
function out(o){
o.animate(v?{"margin-top":0}:{"margin-left": 0}, opts.duration);
}

//鼠标经过和离开
span.hover(function(){
restSpan ? out($(this)) : over($(this));
},function(){
restSpan ? over($(this)) : out($(this));
});

});
};

})(jQuery);

$(function(){

//向左
$("#nav1").dynamicNav({
direction:"left", //动画切换方向，总共4种up 、down 、left 、right
duration:300 //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
});
//向右
$("#nav2").dynamicNav({
direction:"right",
duration:200
});
//向上
$("#nav3").dynamicNav({
direction:"up",
duration:100
});
//向下
$("#nav4").dynamicNav({
direction:"down",
duration:400
});
});

</script>
</head>
<body>

<h1>向左（速度300毫秒）</h1>
<ul class="nav" id="nav1">
<li><a href="http://www.muzilei.com/">首页</a></li>
<li><a href="http://www.muzilei.com/">前端技术</a></li>
<li><a href="http://www.muzilei.com/">视觉设计</a></li>
<li><a href="http://www.muzilei.com/">文章归档</a></li>
<li><a href="http://www.muzilei.com/">工具/书籍</a></li>
<li><a href="http://www.muzilei.com/">关于我</a></li>
</ul>

<h1>向右（速度200毫秒）</h1>
<ul class="nav" id="nav2">
<li><a href="http://www.muzilei.com/">首页</a></li>
<li><a href="http://www.muzilei.com/">前端技术</a></li>
<li><a href="http://www.muzilei.com/">视觉设计</a></li>
<li><a href="http://www.muzilei.com/">文章归档</a></li>
<li><a href="http://www.muzilei.com/">工具/书籍</a></li>
<li><a href="http://www.muzilei.com/">关于我</a></li>
</ul>

<h1>向上（速度100毫秒）</h1>
<ul class="nav" id="nav3">
<li><a href="http://www.muzilei.com/">首页</a></li>
<li><a href="http://www.muzilei.com/">前端技术</a></li>
<li><a href="http://www.muzilei.com/">视觉设计</a></li>
<li><a href="http://www.muzilei.com/">文章归档</a></li>
<li><a href="http://www.muzilei.com/">工具/书籍</a></li>
<li><a href="http://www.muzilei.com/">关于我</a></li>
</ul>

<h1>向下（速度400毫秒）</h1>
<ul class="nav" id="nav4">
<li><a href="http://www.muzilei.com/">首页</a></li>
<li><a href="http://www.muzilei.com/">前端技术</a></li>
<li><a href="http://www.muzilei.com/">视觉设计</a></li>
<li><a href="http://www.muzilei.com/">文章归档</a></li>
<li><a href="http://www.muzilei.com/">工具/书籍</a></li>
<li><a href="http://www.muzilei.com/">关于我</a></li>
</ul>

</body>
</html>

已赞过 已踩过<

评论收起

匿名用户
2018-05-04

展开全部

绑定一个onkeyup事件试试。就是在你鼠标点击松开后再触发。另外你那个用addclass()更好。把css统一写在一个文件里方便管理。当点击下一个按钮时调用removeClass()将样式删除即可。

已赞过 已踩过<

评论收起

Damon9106
推荐于2016-06-24

知道答主

回答量：7

采纳率：0%

帮助的人：7.5万

我也去答题访问个人页

关注

展开全部

这个是在点击的时候改变，而不是点击后

没看明白你这句话

本回答被提问者采纳

已赞过已踩过<

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

更多回答（1）

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

JS或Jquery动态改变导航栏样式

其他类似问题

为你推荐：