JS或Jquery动态改变导航栏样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS或Jquery动态改变导航栏样式相关的知识，希望对你有一定的参考价值。
js怎么实现点击一个按钮时样式改变，直到点击下一个按钮时原先的样式没有，当前按钮显示那个样式。
我用的方法是：function changeStyle()
$(“#menu1”).attr("class","样式");
这个是在点击的时候改变，而不是点击后
求解！！！！！
<!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">
<!--
body, td, th
font-size: 14px;
background-color:#FFF
h1border-bottom:1px solid #999; margin:50px 60px;
/*导航默认样式，可根据实际情况修改*/
*
margin:0;
padding:0
.nav
width:980px;
height:30px;
left:50%;
margin-left:-490px;
list-style:none;
position:relative;
.nav li
display:inline-block;
margin:0 3px;
position:relative;
overflow:hidden;
height:30px; /*建议此高度大于等于里面的a标签高度*/
float:left;
.nav li span
display:inline-block;
overflow:hidden
.nav li a
text-decoration:none;
outline:none;
color:#666;
display:inline-block;
padding:0 10px;
text-align:center;
background-color: #E1E1E1;
font-weight:bold;
height:30px;
line-height:30px;
/*鼠标经过时样式*/
.nav li a.over
background-color:#666;
color:#FFF
-->
</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> 参考技术A 绑定一个onkeyup事件试试。就是在你鼠标点击松开后再触发。另外你那个用addclass()更好。把css统一写在一个文件里方便管理。当点击下一个按钮时调用removeClass()将样式删除即可。 参考技术B 这个是在点击的时候改变，而不是点击后
没看明白你这句话本回答被提问者采纳
HTML JS动态设置CSS样式
在一个网页中 80%的CSS样式都是通过JS来设置 有什么缺点吗？
我估么着缺点就是吃饱了撑的，没事就别用js设置CSS，还有啊一般来说，修改少量CSS可以直接修改就是document.getElementById('id').style.color="#f00";大量修改是改变元素的class名称来实现的。 参考技术A 推荐使用js的经典第三方库jQuery，调用方便，代码精简：jquery中css() 方法可以设置或返回被选元素的一个或多个样式属性，下面的例子将返回首个匹配元素的 background-color 值：
$("p").css("background-color")
下面的例子将设置所有匹配到元素的 background-color 为红色：
$("p").css("background-color","red")
以上是关于JS或Jquery动态改变导航栏样式的主要内容，如果未能解决你的问题，请参考以下文章
UIStatusBar样式与UINavigationBar一致