CSS Tab 选项卡

Jxdwuao

浏览: 761274 次
性别:
来自: 上海

最近访客更多访客>>

xiaolongkill

xuxchen

consy

ningt3344

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS HTML JavaScript

使用 CSS Tab Designer 设计了一个table

生成了代码之后，发现是通过设置 id=current 来选中的

Css

      #tabs8 #current a {
              background-position:0% -42px;
      }
      #tabs8 #current a span {
              background-position:100% -42px;
      }
-->
</style>
        </head>

<body>
                <h2>Tab Menu 8</h2>
                <div id="tabs8">
                        <ul>
                                
<li><a href="Home.html"><span>Home</span></a></li>
<li><a href="Products.html"><span>Products</span></a></li>
<li><a href="Services.html"><span>Services</span></a></li>
<li><a href="Support.html"><span>Support</span></a></li>
<li id="current"><a href="Order.html"><span>Order</span></a></li>
<li><a href="News.html"><span>News</span></a></li>
<li><a href="About.html"><span>About</span></a></li>

这个<li id="current">

这样的话要切换选中的标签的话就要重新刷新页面，设置其它的<li>的id为current。

但是我想通过JS的方式来设置好选中的标签。这样不用刷新页面。于是决定修改：

查阅了其他的类似实现代码后，修改成功：

#tabs8 li.hover a {
              background-position:0% -42px;
      }
      #tabs8 li.hover a span {
              background-position:100% -42px;
      }
-->
</style>
        </head>
<script language="javascript">
currId = "li1";
function setTabs(id){
  document.getElementById(currId).className="";
  document.getElementById(id).className="hover";
  currId = id;
}
</script>
        <body>
                <h2>Tab Menu 8</h2>
                <div id="tabs8">
                        <ul>
                                
<li id="li1" onclick="setTabs(this.id)"><a href="#"><span>Home</span></a></li>
<li id="li2" onclick="setTabs(this.id)"><a href="#"><span>Products</span></a></li>
<li id="li3" onclick="setTabs(this.id)"><a href="#"><span>Services</span></a></li>
<li id="li4" onclick="setTabs(this.id)"><a href="#"><span>Support</span></a></li>
<li id="li5" onclick="setTabs(this.id)"><a href="#"><span>Order</span></a></li>
<li id="li6" onclick="setTabs(this.id)"><a href="#"><span>News</span></a></li>
<li id="li7" onclick="setTabs(this.id)"><a href="#"><span>About</span></a></li>

关键是设置CSS：

#tabs8 li.hover a {
              background-position:0% -42px;
      }
      #tabs8 li.hover a span {
              background-position:100% -42px;
      }

这样 li.hover 把 li 的css设置为 hover 。

分享到：

JS Ajax XML 处理 (prototype) | Hibernate 连接信息的读取

2009-09-11 17:51
浏览 1682
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论