tab切换效果的实现

效果如图所示：

1. 利用css实现Tab切换效果

html部分代码如下：

<form action="" method="post" class="box">
		<input type="radio" name="zz" id="one" checked="">
		<label for="one">红楼梦</label>
		<div>红楼梦《红楼梦》，中国古代章回体长篇小说，
		又名《石头记》《金玉缘》，被列为中国古典四大名
		著之首，一般认为是清代作家曹雪芹（作者尚有争议）
		所著。小说以贾、史、王、薛四大家族的兴衰为背景，
		以富贵公子贾宝玉为视角，描绘了一批举止见识出于
		须眉之上的闺阁佳人们的人生百态，展现了正邪两赋
		有情人的人...</div>
		<input type="radio" name="zz" id="two">
		<label for="two">水浒传</label>
		<div>《水浒传》是由中央电视台与中国电视剧制作中心
		联合出品的43集电视连续剧，根据明代施耐庵的同名小
		说改编。由张绍林执导，杨争光 、冉平改编，李雪健、
		周野芒、臧金生、丁海峰...</div> 
		<input type="radio" name="zz" id="three">
		<label for="three">三国演义</label>
		<div>《三国演义》是中日两国合作制作的动画片，已
		于2009年在中国上映。该动画片是根据中国古代名著
		《三国演义》改编，由北京辉煌动画、央视动画与日本
		未来行星株式会社联手打造的高...</div>
	</form>

css部分代码如下：

.box{
	overflow: hidden;
		margin: 0 auto;
		width: 600px;
		height: 800px;
		background-color: #f1f1f1;
	}
	input{
		position: relative;
		display: none;	
	}
	label{
		float: left;
		width: 200px;height: 40px;
		text-align: center;
		line-height: 30px;
		background-color: #ccc;	
	}
	/*被选中的input后边的label加背景*/
	input[type="radio"]:checked+label{
		background-color: red;
	}
	div{
		display: none;
		text-indent: 40px;
		width: 600px;
		position: absolute;
		top:54px;
	}
	/*选中input时div的状态*/
	input[type="radio"]:checked+label+div{
		display: block;
	}

2. 利用JS实现Tab切换效果

html部分代码如下：

<!-- 标题部分-->
<ul class="title_list fl clearfix">
	<li class="active">红楼梦</li>
		<li>水浒传</li>
		<li>三国演义</li>
	</ul>
<ul class="title_right fg clearfix">
	<li>111</li>
	<li>111</li>
	<li>111</li>
</ul>
<!-- 切换的内容区域-->
<div class="tab">
	<div class="tab_content tab_lay">
		红楼梦红楼梦红楼梦红楼梦红楼梦红楼梦红楼梦红楼梦红楼梦红楼梦红楼梦红楼梦红楼梦红楼梦红楼梦红楼梦
	</div>
	<div class="tab_content">
		水浒传水浒传水浒传水浒传水浒传水浒传水浒传水浒传水浒传水浒传水浒传水浒传水浒传水浒传水浒传水浒传
	</div>
	<div class="tab_content ">
		三国演义三国演义三国演义三国演义三国演义三国演义三国演义三国演义三国演义三国演义三国演义三国演义
	</div>
</div>

css部分代码如下：

ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.fl{
	float: left;
}
.fg{
	float: right;
}
/* 清除浮动 */
.clearfix:after{
	content: "";
	display: block; 
	line-height: 0;
	clear: both;
}
/* 加点击后的样式 */
.active{
	color: red;
}
.tab_content{
	display: none;
}
.tab_lay{
	display: block;
}

js部分代码如下：

// tab切换的实现
var uls=document.getElementsByClassName("title_list")[0];
var lists = uls.getElementsByTagName("li");
var tabs = document.getElementsByClassName("tab_content");
window.onload = function(){
	for(var i = 0;i< lists.length;i++){
		lists[i].index = i;
		lists[i].onclick = function(){
			for(var k = 0;k < lists.length; k++){
				lists[k].className='';
			}
			this.className = 'active';
			for(var j = 0; j < tabs.length; j++){
				tabs[j].style.display = "none";
			}
			tabs[this.index].style.display = "block";
		}
	}
}

3. 利用Bootstrap实现Tab切换效果

参考文档：https://v3.bootcss.com/javascript/#tabs

实例代码如下：

<div>
    <!-- tab切换的标题 -->
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
      <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    </ul>

    <!-- Tab 切换的内容 -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="home">...</div>
      <div role="tabpanel" class="tab-pane" id="profile">...</div>
    </div>
</div>