选项卡的实现

来源：互联网发布：sql基础语句编辑：程序博客网时间：2024/04/29 14:55

通过增加元素的类和移除元素的类来实现选项卡的切换；

解析：

首先前面ul中的li的显示问题，通常li的默认显示是竖着显示，而且前面有原点，去除原点使用list-style：none；横向显示使用float：left；

下面内容区首先要清除浮动，（浮动会使内容与选项一排显示）

内容里面先设置display：none；第一个标签里要设置两个class，然后第二个class设置display：block；根据优先级，会先选择显示出来，然后由jquery来增加和移除类使其显示，具体代码如下:

(由写这个发现<script>标签内如果不写$(document).ready(function(){}（类似这种页面加载以后执行的动作函数）那么就要把标签放到body后面才能生效，否则无效)

选项卡代码如下：

<!DOCTYPE HTML>
<html lang="zh">
<head>
     <meta charset="UTF-8">
     <style type="text/css">
          .tabGroup{list-style-type: none;}
          .tab{width: 100px;height: 30px;background-color: pink;float: left;text-align: center;line-height: 30px;cursor: pointer;margin-left: 2px;}
          .tabSelect{background-color: yellow; color: black;}
          .contentGroup{clear: both;}
          .content{display: none;height: 200px;width: 400px;}
          .contentSelect{background-color:#ccc;display: block;}
     </style>
     <script src="jquery.js"></script>
     <script type="text/javascript">
     $(document).ready(function(){
          $('li.tab').click(function(){
               $(this).addClass('tabSelect').siblings().removeClass('tabSelect');
               var index = $(this).index();
               var $content = $(this).parent().next().children('div');
               $content.removeClass('contentSelect').eq(index).addClass('contentSelect');
          });
     });

</script>
</head>
<body>
     <div class="tabPanels">
          <ul class="tabGroup tabSelect">
               <li class="tab">选项一</li>
               <li class="tab">选项二</li>
               <li class="tab">选项三</li>
          </ul>
          <div class="contentGroup">
               <div class="content contentSelect">内容一</div>
               <div class="content">内容二</div>
               <div class="content">内容三</div>
          </div>
     </div>
</body>

</html>

选项卡在前几天写的时候老是遇到问题，获取不到元素，在这里使用jquery，通过增加元素的类和移除元素的类来实现选项卡的切换；

解析：

首先前面ul中的li的显示问题，通常li的默认显示是竖着显示，而且前面有原点，去除原点使用list-style：none；横向显示使用float：left；

下面内容区首先要清除浮动，（浮动会使内容与选项一排显示）

选项卡代码如下：

</html>

1 0