html实现tab页及切换

最新推荐文章于 2024-06-19 10:23:02 发布

一个菜鸟的奋斗之路

最新推荐文章于 2024-06-19 10:23:02 发布

阅读量4.4w

点赞数 6

分类专栏： js html css

本文链接：https://blog.csdn.net/tao111369/article/details/84337856

版权

js 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

效果图如下：

tab切换通过js和jquery实现，代码如下（主要是调css样式比较麻烦，其他的都比较简单）：

1、页面切换通过js实现（有点繁琐，每个tab都要写一个onclick方法）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
<style type="text/css">
 .contentwrap {
			width: 98%;
			margin: 0 auto;
			padding: 10px;
		}
		ul {
			list-style: none;
			margin: 0;
			padding-left: 20px;
		}
		ul.tab {
			border-bottom: 1px solid #ccc;
			padding-bottom:1px;
			height: 30px;
			line-height: 30px;
			color: #696969;
		}
		ul.tab li {
			float: left;
			font-family: "微软雅黑";
			cursor: pointer;
			padding: 0px;
			
			
		}
		ul.tab li.li {
			padding: 0px 25px 0px;
			font-size: 13px;
			height: 30px;
			line-height: 30px;
			background:#F4F5F9;
			border-top: 1px solid #C5D0DC;
			border-left: 1px solid #C5D0DC;
			border-bottom: 1px solid #C5D0DC;
			
		}
		ul.tab li.current {
			border-bottom: 0px;
			border-top: 2px solid #7599DE;
			font-size: 13px;
			color: #343434;
			background:#FFFFFF;
			
		}
		ul.tab li.li:last-child{border-right: 1px solid #C5D0DC;}
		
</style>
 </head>

 <body>
  <div id="contentwrap"  class="contentwrap">
		<ul class="tab">
			<li id="li_stage" class="li current" onclick="toStageInfo()"><span>tab1</span></li>
			<li id="li_class" class="li" onclick="toClaRecordDetail()"><span>tab2</span></li>
			<li id="li_photo" class="li" onclick="toTrainPhoto()"><span>tab3</span></li>
		</ul>
	</div>
 </body>
 <script>
 
 
 function toStageInfo() {
	document.getElementById("li_stage").className="li current";
	document.getElementById("li_class").className="li";
	document.getElementById("li_photo").className="li";
	
}

function toClaRecordDetail() {
	document.getElementById("li_stage").className="li";
	document.getElementById("li_class").className="li current";
	document.getElementById("li_photo").className="li";
	
}
function toTrainPhoto() {
	document.getElementById("li_stage").className="li";
	document.getElementById("li_class").className="li";
	document.getElementById("li_photo").className="li current";
	
}
 </script>
</html>

2、页面切换通过jquery实现(用此方法实现时需要自己引入jquery.js，各位在参考是要把<script src="jquery.min1.11.1.js"></script>这行代码换成自己本地的路径)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
<style type="text/css">
.....
		
</style>
<script src="jquery.min1.11.1.js"></script>
 </head>

 <body>
  <div id="contentwrap"  class="contentwrap">
		<ul class="tab" id="tab">
			<li id="li_stage" class="li current"><span>tab1</span></li>
			<li id="li_class" class="li"><span>tab2</span></li>
			<li id="li_photo" class="li"><span>tab3</span></li>
		</ul>
	</div>
 </body>
 <script>

$(function(){
	$('#tab > li').on("click",function(){
		var num=$(this).index();
		//var src=basePath+urlArr[num];
		$('#tab > li').each(function(){
			if($(this).index()==num){
				$(this).attr("class","li current");
			}else{
				$(this).attr("class","li");
			}
		});
		//$('#classify_iframe').attr("src",src);
	});
});
 </script>
</html>

一个菜鸟的奋斗之路

关注

6
点赞
踩
68

收藏

觉得还不错? 一键收藏
12
评论
html实现tab页及切换

效果图如下：tab切换通过js和jquery实现，代码如下（主要是调css样式比较麻烦，其他的都比较简单）：1、页面切换通过js实现（有点繁琐，每个tab都要写一个onclick方法）：&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo...
复制链接

扫一扫

专栏目录