jQuery tabs侧面显示

来源：互联网发布：双十一淘宝规则编辑：程序博客网时间：2024/04/28 18:44

1、效果如图：

2、具体代码如下：

<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>侧边框</title>  <script src="../vendor/jquery-1.7.1.min.js" type="text/javascript"></script>  <script src="../vendor/jquery.hashchange.min.js" type="text/javascript"></script>  <script src="../lib/jquery.easytabs.min.js" type="text/javascript"></script>  <style>#tab-side-container {background: #fff;border: solid 1px;height: 400px;font-family:"微软雅黑";font-size:12px;}#tab-side-container ul {width:60px;height: 400px;list-style: none;margin:0;padding: 0;background:#058CCE;float: left;border-right: solid 1px;}#tab-side-container ul li {width: 60px;margin:0;padding: 0;text-align: center;}#tab-side-container ul li a {color:#FFF;text-decoration:none;display: block;padding: 10px 0;outline: none;}#tab-side-container ul li.selected-tab {background:#F90;position: relative;left: 1px;border-style: solid;border-width: 1px 0;}#tab-side-container ul li:first-child.selected-tab {border-top: none;}#tab-side-container ul li a.selected-tab {font-weight: bold;text-decoration: none;}#tab-side-container .panel-container {background: #fff;padding-top: 5px;padding-left: 120px;}</style>  <script type="text/javascript">    $(document).ready( function() {     $('#tab-side-container').easytabs({  animate: false,  tabActiveClass: "selected-tab",  panelActiveClass: "displayed"});    });  </script>  </head>  <body><h3>Tabs on side</h3><div id="tab-side-container"><ul>    <li><a href="#side-tab1">Tab1</a></li>    <li><a href="#side-tab2">Tab2</a></li>    <li><a href="#side-tab3">Tab3</a></li>    <li><a href="#side-tab4">Tab4</a></li>  </ul><div class="panel-container">    <div id="side-tab1">    <h2>Tab1</h2>    <p>content 1.</p>  </div>    <div id="side-tab2">    <h2>Tab2</h2>    <p>content 2.</p>  </div>    <div id="side-tab3">   <h2>Tab3</h2>    <p>content 3.</p>  </div>    <div id="side-tab4">    <h2>Tab4</h2>    <p>content 4.</p>  </div>  </div></body></html>

3、总结

a、需要jQuery easytabs.js 。

b、tab显示在左还是在右，使用css控制ul float:right; or float:left;

0 0