您的位置：首页 > Web前端 > JQuery

jQuery tabs侧面显示

2014-03-08 11:16 393 查看

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;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航