jquery导航条效果请教，点击后更改对应标签的背景颜色。
我的html代码是：<ul><li><ahref="">首页</a></li><li><ahref="">栏目1</a></li><li><ahref="">栏目2</a...
我的html代码是：
<ul>
<li><a href="">首页</a></li>
<li><a href="">栏目1</a></li>
<li><a href="">栏目2</a></li>
<li><a href="">栏目3</a></li>
<li><a href="">栏目4</a></li>
</ul>
想实现的效果是，默认第一个首页的背景颜色是红色，然后点击那个栏目就变化当前元素的背景颜色，我加单击事件不管用啊，点击后页面就刷新了，我想要的效果是，点击谁就变化谁的颜色为红色，然后他的兄弟元素背景颜色变为黑色，求大神给出一个完整的代码。 展开
<ul>
<li><a href="">首页</a></li>
<li><a href="">栏目1</a></li>
<li><a href="">栏目2</a></li>
<li><a href="">栏目3</a></li>
<li><a href="">栏目4</a></li>
</ul>
想实现的效果是，默认第一个首页的背景颜色是红色，然后点击那个栏目就变化当前元素的背景颜色，我加单击事件不管用啊，点击后页面就刷新了，我想要的效果是，点击谁就变化谁的颜色为红色，然后他的兄弟元素背景颜色变为黑色，求大神给出一个完整的代码。 展开
4个回答
展开全部
可以这样做：
1、首先a{display：block；
width：60px;
height:40px;
}
把每个导航超链接a标签都设置成块儿，设置好尺寸，具体根据图片的尺寸。不做成块儿，就无法设置宽高，也就看不到你设置的背景图片的
然后
a:hover{
background:url(images/bg_2.jpg);
}
举例的这个bg_2.jpg就
2、首先制作好一个自己喜欢的导航条背景，长度和宽度都可设置成和官方一样的。
将自己制作好的导航条背景名字改成nv.png记住如果你做出来的是其他格式的话要转换成.png格式的才行。
3、打开你的ftp上传工具连接到网站目录。
1然后找到template/default/style/t5/下面的nv.png文件，这是官方默然的文件路径，如果你用的是其他模板的话找到nv.png。上传覆盖自己弄好的背景至template/default/style/t5里面后台更新缓存就完成更换了。
【延展】
导航条：
导航条起到了各个页面的关联作用，导航条的类型有很多，有通栏导航条，有为了美观性的中英切换导航，还有带有下拉框的导航条，这些导航条都是根据网站内容而定，因此学习该课程你能够了解现在网站经常出现的导航条样式，并可以灵活的运用。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我先占个位置，待会上代码o(^▽^)o
运行效果图
html代码：
<!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=gbk"/>
<title>Document</title>
<style>
ul{
width:600px;
}
li{
float:left;
list-style:none;
width:80px;
padding:5px 10px;
background-color:#088CBC;
text-align:center;
border:1px solid #088CBC;
}
li.curr,li:hover{
background-color:#3CC3F5;
}
a,a:link{
color:black;
font-weight:bold;
text-decoration:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$(function(){
$("ul li").click(function(){
$(this).addClass("curr").siblings().removeClass("curr");
});
});
</script>
</head>
<body>
<ul>
<li class="curr"><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">栏目1</a></li>
<li><a href="javascript:;">栏目2</a></li>
<li><a href="javascript:;">栏目3</a></li>
<li><a href="javascript:;">栏目4</a></li>
</ul>
</body>
</html>
追问
你这个A链接怎么加呢？js里面的链接搜索引擎咋抓取
追答
你的意思是：先变色，然后在跳转href的路径？可以在a标签加一个onclick=“false”,然后在href里面可以保留你的地址。
<ul>
<li class="curr"><a href="index1.htm" onclick="return false">首页</a></li>
<li><a href="index2.htm" onclick="return false">栏目1</a></li>
<li><a href="index3.htm" onclick="return false">栏目2</a></li>
<li><a href="index4.htm" onclick="return false">栏目3</a></li>
<li><a href="index5.htm" onclick="return false">栏目4</a></li>
</ul>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<ul class="menu">
<li><a href="">首页</a></li>
<li><a href="">栏目1</a></li>
<li><a href="">栏目2</a></li>
<li><a href="">栏目3</a></li>
<li><a href="">栏目4</a></li>
</ul>
<script type="text/javascript">
$(function() {
$(".menu li").click(function() {
$(this).css("background-color", "red").siblings().css("background-color","black");
});
});
</script>
<li><a href="">首页</a></li>
<li><a href="">栏目1</a></li>
<li><a href="">栏目2</a></li>
<li><a href="">栏目3</a></li>
<li><a href="">栏目4</a></li>
</ul>
<script type="text/javascript">
$(function() {
$(".menu li").click(function() {
$(this).css("background-color", "red").siblings().css("background-color","black");
});
});
</script>
追问
你这个点击后页面不就刷新了？
追答
不好意思，没有想到页面刷新这个，这个方法实现不了。上面的那个方法可行，然后我觉得用框架也是可以的。至于seo不是很了解，使用框架好不好，不确定。帮不上什么忙，不好意思了
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
href那里设置为不刷新不就可以il吗href="javascript:;",还是不行贴一下完整的html代码还有css，我帮你写一下，这个应该不难的
追问
href="javascript:;" 这样链接怎么加？是不是包含在JS里面的，不利于搜索引擎抓取哦？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
