多个tab选项卡

  1 <!DOCTYPE html>
  2 <html>
  3
  4     <head>
  5         <meta charset="UTF-8">
  6         <title></title>
  7         <style>
  8             * {
  9                 margin: 0px;
 10                 padding: 0px;
 11                 list-style: none;
 12             }
 13
 14             h2 {
 15                 margin-bottom: 20px;
 16                 background: #ccc;
 17                 display: inline-block;
 18             }
 19
 20             h2 span {
 21                 background: blue;
 22                 display: inline-block;
 23                 width: 80px;
 24                 height: 40px;
 25                 text-align: center;
 26                 cursor: pointer;
 27             }
 28
 29             div {
 30                 width: 600px;
 31                 height: 200px;
 32                 border: 2px solid blue;
 33                 overflow: hidden;
 34                 position: relative;
 35             }
 36
 37             ul {
 38                 width: 600px;
 39                 position: absolute;
 40                 left: 0px;
 41                 transition: 0.2s linear;
 42             }
 43
 44             ul li {
 45                 width: 200px;
 46                 height: 200px;
 47                 background: #eee;
 48                 float: left;
 49             }
 50
 51             ul li:nth-child(even) {
 52                 background-color: green;
 53             }
 54
 55             ul.sh {
 56                 display: block;
 57             }
 58
 59             ul.hd {
 60                 display: none;
 61             }
 62
 63             span.disable {
 64                 background: #ccc;
 65                 color: #eee;
 66                 cursor: default;
 67             }
 68         </style>
 69     </head>
 70
 71     <body>
 72
 73         <section id="s1">
 74
 75             <h2><span>家电</span> | <span class="disable">手机</span> | <span class="disable">笔记本</span>| <span class="disable">西瓜</span> </h2>
 76             <div>
 77
 78                 <ul class="sh">
 79                     <li>家电</li>
 80                     <li>BB</li>
 81                     <li>CC</li>
 82
 83                 </ul>
 84                 <ul class="hd">
 85                     <li>手机</li>
 86                     <li>EE</li>
 87                     <li>FF</li>
 88                 </ul>
 89                 <ul class="hd">
 90                     <li>笔记本</li>
 91                     <li>EE</li>
 92                     <li>FF</li>
 93                 </ul>
 94                 <ul class="hd">
 95                     <li>西瓜西瓜</li>
 96                     <li>EE</li>
 97                     <li>FF</li>
 98                 </ul>
 99             </div>
100
101         </section>
102         <hr />
103
104         <section id="s2">
105
106             <h2><span>奶粉</span> | <span class="disable">奶油</span> | <span class="disable">奶酪</span> </h2>
107             <div>
108
109                 <ul class="sh">
110                     <li>奶粉</li>
111                     <li>BB</li>
112                     <li>CC</li>
113
114                 </ul>
115                 <ul class="hd">
116                     <li>奶油</li>
117                     <li>EE</li>
118                     <li>FF</li>
119                 </ul>
120                 <ul class="hd">
121                     <li>奶酪</li>
122                     <li>EE</li>
123                     <li>FF</li>
124                 </ul>
125             </div>
126
127         </section>
128
129         <section id="s3">
130
131             <h2><span>箱包</span> | <span class="disable">香水</span> | <span class="disable">香料</span> </h2>
132             <div>
133
134                 <ul class="sh">
135                     <li>箱包</li>
136                     <li>BB</li>
137                     <li>CC</li>
138
139                 </ul>
140                 <ul class="hd">
141                     <li>香水</li>
142                     <li>EE</li>
143                     <li>FF</li>
144                 </ul>
145                 <ul class="hd">
146                     <li>香料</li>
147                     <li>EE</li>
148                     <li>FF</li>
149                 </ul>
150             </div>
151
152         </section>
153         <script>
154             function SN(_id) {
155                 var btn = document.querySelectorAll(_id + " span");
156                 var uls = document.querySelectorAll(_id + " ul");
157
158                 for(var i = 0; i < btn.length; i++) {
159                     btn[i].index = i;
160                     btn[i].onmouseover = function() {
161                         ini()
162                         //让当前选项卡亮色
163                         this.className = ""
164                         uls[this.index].className = "sh";
165                     }
166                 }
167
168                 function ini() {
169                     for(var i = 0; i < btn.length; i++) {
170                         btn[i].className = "disable"
171                         uls[i].className = "hd";
172                     }
173                 }
174             }
175
176             SN("#s1");
177             SN("#s2");
178             SN("#s3");
179         </script>
180     </body>
181
182 </html>
时间: 2024-10-23 11:23:45

多个tab选项卡的相关文章

【锋利的JQuery-学习笔记】Tab选项卡的实现

效果图: 关键点: 1.标签和标签内容都是用<ul><li>实现的,主要是通过Css样式设计成选项卡的模样. 2.用js代码实现点击标签时,标签内容的切换(做法是<div id="jnBrandList">横向滚动). html: <div id="jnBrand"> <div id="jnBrandTab"> <h2 title="品牌活动">品牌活动&

原生js实现tab选项卡里内嵌图片滚动特效代码

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&

原生JS画的tab选项卡

记录一下原生js写的tab选项卡 鼠标滑入可以切换图片 离开之后自动切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-

【Little Demo】左右按钮tab选项卡双切换

通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. 1) 先实现Tab内容和标签部分的显示: HTML代码: <div class="tab-Infomations"> <div class="arrows"></div> <div class="tab-conten

可以自动切换的tab选项卡实现过程详解

可以自动切换的tab选项卡实现过程详解:关于选项卡大家一定不会陌生,应用非常的频繁,通常选项卡都是需要点击或者划过才能够实现切换.本章节分享一个能够实现自动切换的选项卡功能,并给出它的具体实现过程.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.so

移动web:tab选项卡

平常做移动端会用到tab选项卡,这和PC端有些区别,移动端是触摸滑动切换,PC端是点击.移入切换. 这里滑动切换就是一个移动端事件的应用,这里主要用到的触摸事件:touchstart.touchmove.touchend. 和做其他的效果一样,先有html结构,css样式修饰,再写JS代码. html: <div class="mtabs" id="tabs"> <ul class="mhead"> <li>t

语音导航的tab选项卡效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家 ladies and 乡亲们,程序员同志们,周末仍然坚守工作岗位,或者学习不辍的童鞋们,福音来了. 语音识别高不高端.难不难? 今天给大家推荐一个简单易用的js实现的语音识别框架annyang,然后一个案例示范使用. 在线案例,下载收藏. annyang是一个能够实现语音识别的js类库,小巧易用(仅仅2k),兼容中文.接下来我们看看怎么使用. 首先导入该annyang库,可以使用CDN的方式,也可以下载来使用. <!--下载到本地使

各种效果的tab选项卡

;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); return this.each(function(i){ var _this=$(this); var $menus=_this.children( opts.menuChildSel ); var $container=$( opts.cntSelect ).eq(i); if( !$contai

【技术】同页面可多次使用的jQuery tab选项卡代码

        <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>同页面可多次使用的jQuery tab选项卡代码</title><style type="text/css"> *{ margin:0; pad

tytabs.jquery.min.js实例,渐变的TAB选项卡特效

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>唐山塑钢门窗</title><script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"><