网页DIV和CSS样式导航菜单的问题【加急】
菜单默认下是红色背景，白色文字。
第一个菜单按钮默认是白色背景，红色文字。
当鼠标单击的时候 换成白色背景，红色文字。
当鼠标划过的时候，换图片，可以不改变颜色（这个可有可无）
单击的时候是换倒角背景！！！
html代码：
<ul id="nav_list">
<li><a href="#" class="nav01" onclick="navChangeBg(0)">法国报价</a></li>
<li><a href="#" onclick="navChangeBg(1)">法国报价</a></li>
<li><a href="#" onclick="navChangeBg(2)">法国报价</a></li>
<li><a href="#" onclick="navChangeBg(3)">法国报价</a></li>
<li><a href="#" onclick="navChangeBg(4)">法国报价</a></li>
</ul>
css样式：
ul,li {
list-style:none;
}
#nav_list {
background:#a00100;
height:30px;
line-height:30px;
}
#nav_list li {
float:left;
margin: 0 20px;
}
#nav_list a:link,#nav_list a:visited {
color:#fff;
font-size:14px;
font-weight:bold;
text-decoration:none;
height:30px;
float:left;
padding:0 5px;
}
#nav_list a:hover {
text-decoration:underline;
}
#nav_list .nav01:link,#nav_list .nav01:visited {
background:#fff;
color:#a00100;
}
js代码：
function navChangeBg(num) {
var navId = document.getElementById("nav_list");
var navA = navId.getElementsByTagName("a");
for(var i=0;i<navA.length;i++) {
if(i == num) {
navA[i].className = "nav01";
} else {
navA[i].className = "";
}
}
}追问
<ul id="nav_list">
<li><a href="#" class="nav01" onclick="navChangeBg(0)">法国报价</a></li>
<li><a href="#" onclick="navChangeBg(1)">法国报价</a></li>
<li><a href="#" onclick="navChangeBg(2)">法国报价</a></li>
<li><a href="#" onclick="navChangeBg(3)">法国报价</a></li>
<li><a href="#" onclick="navChangeBg(4)">法国报价</a></li>
</ul>
css样式：
ul,li {
list-style:none;
}
#nav_list {
background:#a00100;
height:30px;
line-height:30px;
}
#nav_list li {
float:left;
margin: 0 20px;
}
#nav_list a:link,#nav_list a:visited {
color:#fff;
font-size:14px;
font-weight:bold;
text-decoration:none;
height:30px;
float:left;
padding:0 5px;
}
#nav_list a:hover {
text-decoration:underline;
}
#nav_list .nav01:link,#nav_list .nav01:visited {
background:#fff;
color:#a00100;
}
js代码：
function navChangeBg(num) {
var navId = document.getElementById("nav_list");
var navA = navId.getElementsByTagName("a");
for(var i=0;i<navA.length;i++) {
if(i == num) {
navA[i].className = "nav01";
} else {
navA[i].className = "";
}
}
}追问
我想将白色背景改成图片形式。该怎么改！
温馨提示：答案为网友推荐，仅供参考
第1个回答 2012-06-14
var li1=document.getElementById('nav');
var oli1=li1.getElementsByTagName('a');
for(i=0;i<oli1.length;i++)
oli1[i].onclick=function(){
for(i=0;i<oli1.length;i++){
oli1[i].className='aaa';
this.className='hover';
}
}
第一个菜单设置class="hover" 还有 这里的东西全部设置到a 标签上 包括菜单样式追问
var oli1=li1.getElementsByTagName('a');
for(i=0;i<oli1.length;i++)
oli1[i].onclick=function(){
for(i=0;i<oli1.length;i++){
oli1[i].className='aaa';
this.className='hover';
}
}
第一个菜单设置class="hover" 还有 这里的东西全部设置到a 标签上 包括菜单样式追问
你QQ多少，你这样说我不是很明白
本回答被网友采纳第2个回答 2012-06-14
<style type="text/css">
body,li{ margin:0;}
ul{ margin:0; padding:0; height:29px; z-index:2;}
#top li{ float:left; padding-left:10px; height:24px; line-height:24px; display:inline; font-size:12px;}
#top li a{ float:left; background:url(bg.png) no-repeat right -29px; height:29px; line-height:29px; color:#032f51;}
#top li a:hover{ color:#032f51; background:url(bg.png) no-repeat right -87px; height:29px;}
#top li a:hover span{ color:#032f51; background:url(bg.png) no-repeat 0 -58px; height:29px;}
#top .active a{ color:#060000; background:url(bg.png) no-repeat right bottom; height:29px;}
#top .active a span{ color:#060000; background:url(bg.png) no-repeat 0 -116px;}
#top .active a:hover{ color:#060000; background:url(bg.png) no-repeat right bottom; height:29px;}
#top .active a:hover span{ color:#060000; background:url(bg.png) no-repeat 0 -116px;}
#top li a span{ float:left; padding:0 14px; height:29px; background:url(bg.png) no-repeat 0 0;}
#content{ font-size:12px;width:400px; border:1px solid #8c9fa8; margin-top:-2px;}
#content div{ display:none; text-indent:2em; line-height:30px; border:1px solid #fff; width:398px; background:#cadfeb; }
</style>
<script type="text/javascript">
window.onload=function()
{
var oLI=document.getElementById('nav').getElementsByTagName('li');
var oDiv=document.getElementById('content').getElementsByTagName('div');
for (var i=0;i<oLI.length;i++)
{
oLI[i].index=i;
oLI[i].onclick=function()
{
for(var i=0;i<oLI.length;i++){
oLI[i].className='';
oDiv[i].style.display='none';
}
oLI[this.index].className='active';
oDiv[this.index].style.display='block';
}
}
}
</script>
<body>
<div id="top">
<ul id="nav">
<li class="active"><a href="#"><span>词典</span></a></li>
<li><a href="#"><span>词典词典</span></a></li>
<li><a href="#"><span>词典词典词典</span></a></li>
<li><a href="#"><span>词典词典典</span></a></li>
</ul>
<div id="content">
<div style=" display:block;">这里是第一段文字内容。这里是第一段文字内容。</div>
<div>这里是第二段文字内容。这里是第二段文字<br/>内容。</div>
<div>这里是第三段文字内容。这里是第三段文字内容。</div>
<div>这里是第四段文字内容。这里是第四段文字内容。</div>
</div>
</div>
</body>
在根据你要的效果稍加修改一下 li 的样式就可以了追问
body,li{ margin:0;}
ul{ margin:0; padding:0; height:29px; z-index:2;}
#top li{ float:left; padding-left:10px; height:24px; line-height:24px; display:inline; font-size:12px;}
#top li a{ float:left; background:url(bg.png) no-repeat right -29px; height:29px; line-height:29px; color:#032f51;}
#top li a:hover{ color:#032f51; background:url(bg.png) no-repeat right -87px; height:29px;}
#top li a:hover span{ color:#032f51; background:url(bg.png) no-repeat 0 -58px; height:29px;}
#top .active a{ color:#060000; background:url(bg.png) no-repeat right bottom; height:29px;}
#top .active a span{ color:#060000; background:url(bg.png) no-repeat 0 -116px;}
#top .active a:hover{ color:#060000; background:url(bg.png) no-repeat right bottom; height:29px;}
#top .active a:hover span{ color:#060000; background:url(bg.png) no-repeat 0 -116px;}
#top li a span{ float:left; padding:0 14px; height:29px; background:url(bg.png) no-repeat 0 0;}
#content{ font-size:12px;width:400px; border:1px solid #8c9fa8; margin-top:-2px;}
#content div{ display:none; text-indent:2em; line-height:30px; border:1px solid #fff; width:398px; background:#cadfeb; }
</style>
<script type="text/javascript">
window.onload=function()
{
var oLI=document.getElementById('nav').getElementsByTagName('li');
var oDiv=document.getElementById('content').getElementsByTagName('div');
for (var i=0;i<oLI.length;i++)
{
oLI[i].index=i;
oLI[i].onclick=function()
{
for(var i=0;i<oLI.length;i++){
oLI[i].className='';
oDiv[i].style.display='none';
}
oLI[this.index].className='active';
oDiv[this.index].style.display='block';
}
}
}
</script>
<body>
<div id="top">
<ul id="nav">
<li class="active"><a href="#"><span>词典</span></a></li>
<li><a href="#"><span>词典词典</span></a></li>
<li><a href="#"><span>词典词典词典</span></a></li>
<li><a href="#"><span>词典词典典</span></a></li>
</ul>
<div id="content">
<div style=" display:block;">这里是第一段文字内容。这里是第一段文字内容。</div>
<div>这里是第二段文字内容。这里是第二段文字<br/>内容。</div>
<div>这里是第三段文字内容。这里是第三段文字内容。</div>
<div>这里是第四段文字内容。这里是第四段文字内容。</div>
</div>
</div>
</body>
在根据你要的效果稍加修改一下 li 的样式就可以了追问
我看了下。导航我要第一个文字颜色。默认为白色，。
追答默认颜色设置 #top li a{ float:left; background:url(bg.png) no-repeat right -29px; height:29px; line-height:29px; color:#FFF;}
鼠标点击时 #top li .active{ background:#FFF; color:red; }
相似回答
大家正在搜