纵向tab标签切换效果
Posted 和路雪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纵向tab标签切换效果相关的知识，希望对你有一定的参考价值。
html css js直接用就好
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纵向tab标签切换效果</title> <style> *{ margin:0; padding:0;list-style: none;} body {font:12px/1.5 Tahoma;} #outer {width:450px;margin:150px auto;} #tab {width:150px;float:left;overflow:hidden;zoom:1;background:#000;border:1px solid #000;} #tab li {color:#fff;height:30px;cursor:pointer; line-height:30px;width:150px;} #tab li.current {color:#000;background:#ccc;} #content {width:295px;float:left;border:1px solid #000;height:400px; } #content div {line-height:25px;display:none;margin:0 30px;padding:10px 0;} </style> </head> <body> <!-- html代码begin --> <div id="outer"> <ul id="tab"> <li class="current">tab标签</li> <li>qq在线客服代码</li> <li>css3</li> </ul> <div id="content"> <div style="display:block;"> <a href="http://www.lanrenzhijia.com/tab">tab标签</a> </div> <div> <a href="http://www.lanrenzhijia.com/service">qq在线客服代码</a> </div> <div> <a href="http://www.lanrenzhijia.com/js/css3">css3</a> </div> </div> <div style="clear: both;"></div> </div> <!-- html代码end --> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> <script> //获取变量==>存变量==>给变量绑定属性 $(function(){ var $li = $(‘#tab li‘);//获取每一个标题和内容用变量存起来 var $ul = $(‘#content div‘); $li.click(function(){ var $this = $(this);//用变量把点击的每一个当前的li存起来 var $t = $this.index();// 获取当前li下标 $li.removeClass();//因为默认是第一个显示 所以先移除 $this.addClass(‘current‘);//再添加当前的 $ul.css(‘display‘,‘none‘);//因为默认是第一个显示 所以先隐藏 $ul.eq($t).css(‘display‘,‘block‘);//当前内容再出现 }) }); </script> </body> </html>
以上是关于纵向tab标签切换效果的主要内容，如果未能解决你的问题，请参考以下文章