Code

Tab页
这是一款基于jquery的tab页插件,可定义tab标签的位置,可设置是否自动切换等效果。
tab标签在底部的效果预览

Tab 1 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 2 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 3 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 4 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

代码
1.在body里加入如下HTML代码:

<div id="tabs" class="stContainer">
    <div id="tabs-1">
        <h2>Tab 1 Title</h2>	
        <p>Tab 1 Content here</p>  			
      </div>
    <div id="tabs-2">
        <h2>Tab 2 Title</h2>	
        <p>Tab 2 Content here</p>     
      </div>                      
    <div id="tabs-3">
        <h2>Tab 3 Title</h2>	
        <p>Tab 3 Content here</p>          				          
      </div>
    <div id="tabs-4">
        <h2>Tab 4 Title</h2>	
        <p>Tab 4 Content here</p>
    </div>
    <ul>
      <li><a href="#tabs-1">
            <img class='logoImage2' border="0" width="50px" src="images/Step1.png">
            <h2>Tab 1<br />
            <small>Description</small></h2>
          </a></li>
      <li><a href="#tabs-2">
            <img class='logoImage2' border="0" width="50px" src="images/Step2.png">
            <h2>Tab 2<br />
            <small>Description</small></h2>
          </a></li>
      <li><a href="#tabs-3">
            <img class='logoImage2' border="0" width="50px" src="images/Step3.png">
            <h2>Tab 3<br />
            <small>Description</small></h2>
          </a></li>
      <li><a href="#tabs-4">
            <img class='logoImage2' border="0" width="50px" src="images/Step4.png">
            <h2>Tab 4<br />
            <small>Description</small></h2>
     </a></li>
    </ul>
</div>

2.在head标签内加入css:

<style type="text/css">
    .stContainer {
        position:relative;
        margin:0 auto;
        padding:0;         
        font: normal 12px Verdana, Arial, Helvetica, sans-serif; 
        color:              #5A5655;
        background-color:   #F8F8F8;
        border:             0px solid #CCC;
        width:926px;
        -webkit-border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius  : 8px;
        -moz-border-radius  : 8px;    
    }
    .stContainer div {
       /* -webkit-border-radius: 5px; 
        -webkit-border-top-left-radius
        -webkit-border-top-right-radius */
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft   : 8px;
        -moz-border-radius-topright  : 8px; 
        position: relative;    
        margin:             0;   
        border:             1px solid #CCC;
        padding:            10px;   
        border-bottom-width: 0 !important;
        height: 200px;
        width:905px;
        font: normal 12px Verdana, Arial, Helvetica, sans-serif; 
        color:              #5A5655;   
        background-color:   #F8F8F8;
        text-align:left;
        overflow:auto;    
    }
    .stContainer ul {
        display:block;
        list-style: none;    
        position: relative;    
        padding: 0px ;
        padding-top: 0px;   
        padding-right: 0px; 
        padding-left: 5px;     
        margin: 0;     
        width:920px;
        height:70px; 
        clear: both;
        border: 1px solid #CCCCCC;    
        background: #EEEEEE;
        -moz-border-radius-bottomleft      : 8px;
        -moz-border-radius-bottomright     : 8px;
        -moz-border-radius-topleft   : 0px;
        -moz-border-radius-topright  : 0px; 
        -webkit-border-bottom-left-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-top-left-radius: 0px;
        -webkit-border-top-right-radius: 0px;  
    }
    .stContainer ul li{ 
        position: relative; 
        margin: 0;
        padding: 0;    
        border-top: 0px solid #E0E0E0 !important; 
        border-right: 1px solid #E0E0E0;  
        border-left: 1px solid #E0E0E0;      
        float: left;
    }
    .stContainer ul li a { 
      display:block;
      margin:0;
      padding:3px;
      text-decoration: none;
      height:64px;
      width:220px;
      color:#0464BB;
      outline-style:none;
    }
    .stContainer ul li a img { 
      display:block;
      margin:0;
      padding:3px;
      height:50px;
      width:50px;
      float:left;
    }
    .stContainer ul li a h2 { 
      display:block;
      font: bold 18px Verdana, Arial, Helvetica, sans-serif;
      float:left;
    }
    .stContainer ul li a small { 
      font: normal 12px Verdana, Arial, Helvetica, sans-serif;
      float:left;
    }
    .stContainer ul li a:hover {   
      color:#FFF; 
      background: #EA8511; 
    }
    .stContainer ul li a.sel { 
      position: relative;
      top:-1px;
      height:64px;
      color:#EA8511;  
      background: #F8F8F8;  
      cursor:text;   
    }
    .stContainer ul li a.dis {
      color:#CCCCCC;  
      background: #F8F8F8;  
      cursor:text;   
    }
</style>

3.在head里引入js文件:

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jquery.smartTab.js" type="text/javascript"></script>

4.继续在head里加入js代码:

<script type="text/javascript">
    $(document).ready(function() {
        $('#tabs').smartTab({
            transitionEffect: 'fade'
        });
    });
</script>

5.参数列表:
参数名 默认值 说明
selected 0 默认选种哪一项, 0 是第一项
autoProgress false 是否自动切换tab页
progressInterval 3500 自动切换tab页间隔时间
stopOnFocus false 鼠标悬停在tab上时是否停止tab切换
transitionEffect 'none' tab切换效果, none/fade/slide