网站导航栏样式

<!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=gb2312" />
<title>无标题文档</title>
<style>
.div {
  height: 24px;  list-style-type: none;
}
div {
  height: 24px;  list-style-type: none;
}
.div li {
 float: left; width: 80px;
}
</style>
<script>
var oldobj;
var oldobj1;
function showdiv(obj){
if(oldobj){oldobj.style.background="";}
obj.style.background="red";
oldobj=obj;
}
function showdiv1(obj){
if(oldobj1){oldobj1.style.background="";}
obj.style.background="red";
oldobj1=obj;
}</script>
</head>
<body>
<div class="div">
  <ul>
    <li onclick="showdiv(this)">首页</li>
    <li onclick="showdiv(this)">音乐</li>
    <li onclick="showdiv(this)">体育</li>
    <li onclick="showdiv(this)">电脑</li>
  </ul>
</div>
<div>
  <ul>
    <li onclick="showdiv1(this)">篮球</li>
    <li onclick="showdiv1(this)">足球</li>
    <li onclick="showdiv1(this)">乒乓球</li>
  </ul>
</div>
</body>
</html>
也不知道是不是这个意思

解决方案 »

  1.   

    这样也可以吧：<!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=gb2312" />
    <title>无标题文档</title>
    <style>
    .div {
      height: 24px;  list-style-type: none;
    }
    div {
      height: 24px;  list-style-type: none;
    }
    .div li {
     float: left; width: 80px;
    }
    </style>
    <script>
    var oldobj;
    var oldobj1;
    function showdiv(obj,value){
    if(value==1){
    if(oldobj){oldobj.style.background="";}
    obj.style.background="red";
    oldobj=obj;
    }
    else{
    if(oldobj1){oldobj1.style.background="";}
    obj.style.background="red";
    oldobj1=obj;
    }}
    </script>
    </head>
    <body>
    <div class="div">
      <ul>
        <li onclick="showdiv(this,1)">首页</li>
        <li onclick="showdiv(this,1)">音乐</li>
        <li onclick="showdiv(this,1)">体育</li>
        <li onclick="showdiv(this,1)">电脑</li>
      </ul>
    </div>
    <div>
      <ul>
        <li onclick="showdiv(this,2)">篮球</li>
        <li onclick="showdiv(this,2)">足球</li>
        <li onclick="showdiv(this,2)">乒乓球</li>
      </ul>
    </div>
    </body>
    </html>
      

  2.   

    Logo           首页 音乐 体育 电脑 (导航栏)    1.htm (左分类栏) 篮球 足球 乒乓球 Logo           首页 音乐 体育 “电脑” (导航栏)    2.htm (左分类栏) PC MAC PSP 
    Logo           首页 音乐 “体育” 电脑 (导航栏)    2.htm (左分类栏) 足球 篮球 手球 对不起我没有说清楚，是这样的，当点击1.htm 导航栏的“电脑”字体连接时（跳转到2.htm页 中间经过刷新页面），2.htm的导航栏的“电脑”字体背景显示红色，当点击左分类栏的MAC时，"电脑"字体背景依然显示红色，点击PSP,2.htm的导航栏的“电脑”字体背景也显示红色，当点击2.htm的导航栏的"音乐"字体连接时(跳转到3.htm页 中间经过刷新页面)，3.htm导航栏“音乐”字体背景显示红色，3.htm导航栏”电脑“字体背景红色消失，高人帮帮忙，谢谢
      

  3.   

    晕
    你这个就更简单啦
    比我写的那个还简单，因为你是不同页面的
    当你跳转到跳转到2.htm页页面的时候，这个页面只属于电脑栏目的，那么你就固定死他就是红色的
    只有左部分的那个就按我第一个那个写法就可以了
      

  4.   

    您可能理解错了，不能写死，他是随着点击的导航栏字体，在连接到页面上显示红色 我想需要把点击的导航栏字体的ID传给要连接到的页面，获取ID，虽然有思路，但不知道怎么写
      

  5.   


    晕，什么啊我先问一句，你的导航对应的页面是不是唯一的？就是说，你的 电脑对应2.htm，音乐对应3.htm如果是唯一的那我说的一点都没说
      

  6.   

    http://www.xiaoyuanso.com/