jQuery tabs侧面显示纵向显示

最新推荐文章于 2024-07-14 11:00:00 发布

安果移不动

最新推荐文章于 2024-07-14 11:00:00 发布

阅读量468

点赞数

分类专栏： # jquery

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/86503249

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>