jQuery实现的多滑动门，多选项卡效果代码

本文实例讲述了jQuery实现的多滑动门，多选项卡效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

* {
  margin:0;
  padding:0;
}
body {
  font-size:12px;
}
ul, li {
  list-style-type:none;
}
#tab {
  width:500px;
  height:200px;
  margin:20px auto;
  overflow:hidden;
}
#tab .tab_title {
  width:500px;
  height:22px;
  overflow:hidden;
  left:0;
  top:0;
  clear:both;
  overflow:hidden;
  position:relative;
}
#tab .tab_title .u {
  width:465px;
  overflow:hidden;
  position:relative;
}
#tab .tab_title ul {
  margin:0 5px;
  position:absolute;
  float:left;
  width:2784px;
}
#tab .tab_title div {
  float:left;
  width:15px;
  height:20px;
  line-height:20px;
  cursor:pointer;
}
#tab .tab_title span.vright {
  top:0;
  right:5px;
  margin-left:2px;
}
#tab .tab_title span.vleft {
  top:0;
  left:0px;
  padding-left:5px;
}
#tab .tab_title li {
  float:left;
  width:100px;
  height:20px;
  line-height:20px;
  text-align:center;
  background-color:#cccccc;
  margin-right:14px;
  border:1px #999999 solid;
  cursor:pointer;
}
#tab .tab_title li:hover {
  background-color:#999999
}
#tab .tab_title li.selected {
  background-color:#666666;
}
#tab .tab_content {
  width:476px;
  height:156px;
  overflow:hidden;
  padding:10px;
  border:1px #CCCCCC solid;
}
#tab .tab_content div {
  border:1px #999999 dotted;
}
#tab .tab_content div p {
  line-height:1.5;
  text-indent:25px;
  color:#333333;
}
#tab .tab_content .none {
  display:none;
}
#div1 {
  border:1px #CCCCCC solid;
  position:absolute;
  display:none;
  background:#EEF7EE;
  font-size:12px;
  padding:5px;
  color:#999999;
}
#div2 {
  width:120px;
  height:15px;
  border:1px #CCCCCC solid;
  position:absolute;
  display:none;
  background:#CCCCCC;
  font-size:5px;
  padding:2px;
  color:#999999;
}





 
  <<
  
   

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11
    
12
    
13
    
14
    
15
    
16
    
17
    
18
    
19
    
20
    
21
    
22
    
23
    
24
   
  
  >>
 
 
  
   
1的内容
  
  
   
2的内容
  
  
   
3的内容
  
  
   
4的内容
  
  
   
5的内容
  
  
   
6的内容
  
  
   
7的内容
  
  
   
8的内容
  
  
   
9的内容
  
  
   
10的内容
  
  
   
10的内容
  
  
   
12的内容
  
  
   
13的内容
  
  
   
14的内容
  
  
   
15的内容
  
  
   
16的内容
  
  
   
17的内容
  
  
   
18的内容
  
  
   
19的内容
  
  
   
20的内容
  
  
   
21的内容
  
  
   
22的内容
  
  
   
23的内容
  
  
   
24的内容
  
 

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。