英协网今天突然心血来潮，想到一个很简单的方法即可达到的tab效果
其实逻辑很简单，但看到网上基本上没这样写的
不知道实际应用中是否会有问题呢，请大侠指教
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>jQuery简易选项卡</title>
- <style>
- *{ margin:0; padding:0;}
- body, ul, li {
- margin:0;
- padding:0;
- }
- body {
- font:12px/1.5 Tahoma;
- }
- #outer {
- width:450px;
- margin:10px auto;
- }
- #tab {
- overflow:hidden;
- zoom:1;
- background:#000;
- border:1px solid #000;
- }
- #tab li {
- float:left;
- color:#fff;
- height:30px;
- cursor:pointer;
- line-height:30px;
- list-style-type:none;
- padding:0 20px;
- }
- #tab li.current {
- color:#000;
- background:#ccc;
- }
- #content {
- border:1px solid #000;
- border-top-width:0;
- }
- #content ul {
- line-height:25px;
- display:none;
- margin:0 30px;
- padding:10px 0;
- }
- </style>
- </head>
- <body>
- <div id="outer">
- <ul id="tab">
- <li class="current">第一课</li>
- <li>第二课</li>
- <li>第三课</li>
- </ul>
- <div id="content">
- <ul style="display:block;">
- 1111
- </ul>
- <ul>
- 2222
- </ul>
- <ul>
- 3333
- </ul>
- </div>
- </div>
- <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
- <script>
- $(function(){
- window.onload = function()
- {
- var $li = $('#tab li');
- var $ul = $('#content ul');
- $li.click(function(){
- $li.removeClass();
- var $t = $(this).index();
- $(this).addClass('current');
- $ul.css('display','none');
- $ul.eq($t).css('display','block');
- })
- }
- });
- </script>
- </body>
- </html>
图片演示：
以上就是本文所述的全部内容了，希望大家能够喜欢。
