看到网址上有很多tab。所有研究了一下关于tab。发现三种方法,分享一下
前台代码:
1 <div class="tabdiv"> 2 <div id="tab-container-1"> 3 <ul id="tab-container-1-nav"> 4 <li id="tablink1"><a href="#tab1" οnmοuseοver='Show_Tab("1")'>tab 1</a></li> 5 <li id="tablink2"><a href="#tab2" οnmοuseοver='Show_Tab("2")' >tab 2</a></li> 6 <li id="tablink3"><a href="#tab3" οnmοuseοver='Show_Tab("3")' >tab 3</a></li> 7 <li id="tablink4"><a href="#tab3" οnmοuseοver='Show_Tab("4")' >tab 4</a></li> 8 <li id="tablink5"><a href="#tab3" οnmοuseοver='Show_Tab("5")' >tab 5</a></li> 9 </ul> 10 11 <div class="tab" id="tab1" style=" display:block"> 12 <h2>tab 1</h2> 13 <p>1.哈佛有一个著名的理论:人的差别在于业余时间,而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论,你会发现,你的人生正在发生改变,坚持数年之后,成功会向你招手</p> 14 </div> 15 <div class="tab" id = "tab2"> 16 <h2>tab 2</h2> 17 <p>2.无论你的收入是多少,记得分成五份进行规划投资:增加对身体的投资,让身体始终好用;增加对社交的投资,扩大你的人脉;增加对学习的投资,加强你的自信;增加对旅游的投资,扩大你的见闻;增加对未来的投资,增加你的收益。好好规划落实,你会发现你的人生逐步会有大量盈余。</p> 18 </div> 19 <div class="tab" id = "tab3"> 20 <h2>tab 3</h2> 21 <p>3.过去的一页,能不翻就不要翻,翻落了灰尘会迷了双眼。有些人说不出哪里好,但就是谁都替代不了! 那些以前说着永不分离的人,早已经散落在天涯了。收拾起心情,继续走吧,错过花,你将收获雨,错过这一个,你才会遇到下一个。</p> 22 </div> 23 <div class="tab" id = "tab4"> 24 <h2>tab 4</h2> 25 <p>4.被人误解的时候能微微的一笑,这是一种素养;受委屈的时候能坦然的一笑,这是一种大度;吃亏的时候能开心的一笑,这是一种豁达;无奈的时候能达观的一笑,这是一种境界;危难的时候能泰然一笑,这是一种大气;被轻蔑的时候能平静的一笑,这是一种自信;失恋的时候能轻轻的一笑,这是一种洒脱。</p> 26 </div> 27 <div class="tab" id = "tab5"> 28 <h2>tab 5</h2> 29 <p>5.人生途中,有些是无法逃避的,比如命运;有些是无法更改的,比如情缘;有些是难以磨灭的,比如记忆;有些是难以搁置的,比如爱恋……与其被动地承受,不如勇敢地面对;与其鸟宿檐下,不如击翅风雨;与其在沉默中孤寂,不如在抗争中爆发……路越艰,阻越大,险越多,只要走过去了,人生就会更精彩。</p> 30 </div> 31 </div> 32 </div>
第一种是javascript方法:
1 <script type="text/javascript"> 2 function Show_Tab(active) { 3 var tabsNumber = 5; 4 for (i = 1; i <= tabsNumber; i++) { 5 if (i != active) { 6 document.getElementById("tablink" + i).className = 'tab2'; //向指定元素添加CSS元素 7 document.getElementById("tab" + i).style.display = 'none'; //向指定元素添加style。 8 } 9 else { 10 document.getElementById("tablink" + i).className = 'tab1'; 11 document.getElementById("tab" + i).style.display = 'block'; 12 } 13 } 14 } 15 </script>
第二种是jQuery方法: 别忘了引入jQuery
1 <script type="text/javascript"> 2 $(function () { 3 $("#tab-container-1 ul li").mouseover(function () { 4 $(this).addClass("tab1").siblings().removeClass("tab1"); //被选中的li加CSS,其同辈去掉CSS 5 var index = $("#tab-container-1 ul li").index(this); //获取被点击的li在全部li中的索引。 6 $(".tab").eq(index).show().siblings().hide(); //根据索引选中.tab层show()。其同辈hide() 7 }) 8 }) 9 </script>
第三种是一个插件Yetii: 需要Yetii这样一个开源的插件网址链接:http://www.kminek.pl/lab/yetii/
1 <script type="text/javascript"> 2 var tabber1 = new Yetii({ 3 id: 'tab-container-1', 4 active: 1, 5 tabclass:'tab' 6 7 }); 8 </script>
最后CSS代码:
1 body 2 { 3 font-family: 宋体, Arial, Helvetica, sans-serif; 4 font-size: 16px; 5 } 6 .tabdiv 7 { 8 border:1px solid; 9 margin:0 auto; 10 width:400px; 11 } 12 #tab-container-1 13 { 14 margin:0 auto; 15 width: 100%; 16 text-align: left; 17 margin-bottom: 10px; 18 } 19 ul 20 { 21 width:400px; 22 padding: 10px 0 0 10px; 23 height: 26px; 24 border-bottom: 1px solid #BBB; 25 } 26 ul li 27 { 28 color: #005C9C; 29 cursor: pointer; 30 display: inline; 31 margin-bottom: 0px; 32 padding: 5px; 33 background: white; 34 float: left; 35 font-weight: bold; 36 font-size: 12px; 37 text-align: center; 38 position: relative; 39 margin-right: 3px; 40 } 41 42 a 43 { 44 text-decoration:none; 45 } 46 47 .tab1 48 { 49 background-color:#3399FF; 50 color:#003399; 51 font-weight:bold; 52 text-decoration:none; 53 border-right:1px solid #A2C0FE; 54 height:16px; 55 line-height:16px; 56 } 57 .tab2 58 { 59 line-height:16px; 60 }
这个Yetii还有很多种表现形式。
为什么开源的插件都是英文的呢?(答:天朝的程序猿都一门心思赚钱买房子)英语很重要啊!需要加强啊。当然google的chrome浏览器也很强大。