CSS Tab 选项卡

最新推荐文章于 2024-04-19 20:39:07 发布

jxdwuao

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量109

点赞数

分类专栏： Css 文章标签： CSS HTML JavaScript ViewUI

本文链接：https://blog.csdn.net/jxdwuao/article/details/83459327

版权

Css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用 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" οnclick="setTabs(this.id)"><a href="#"><span>Home</span></a></li>
<li id="li2" οnclick="setTabs(this.id)"><a href="#"><span>Products</span></a></li>
<li id="li3" οnclick="setTabs(this.id)"><a href="#"><span>Services</span></a></li>
<li id="li4" οnclick="setTabs(this.id)"><a href="#"><span>Support</span></a></li>
<li id="li5" οnclick="setTabs(this.id)"><a href="#"><span>Order</span></a></li>
<li id="li6" οnclick="setTabs(this.id)"><a href="#"><span>News</span></a></li>
<li id="li7" οnclick="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 。

jxdwuao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Tab 选项卡

使用 CSS Tab Designer 设计了一个table 生成了代码之后，发现是通过设置 id=current 来选中的Css #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { backgrou...
复制链接

扫一扫

专栏目录