Tabs

最新推荐文章于 2025-08-07 22:25:00 发布

原创最新推荐文章于 2025-08-07 22:25:00 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#tabs #class #jquery #function #float #html

JavaScript 同时被 3 个专栏收录

2 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

本文介绍如何使用HTML、JS与CSS实现多标签导航功能，包括使用setTab函数进行参数匹配、jQuery方法利用href属性进行参数配对，以及不同HTML结构的对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<div id="tab">
	<ul id="tabs" class="clearfix"> 
		<li class="current" onclick="setTab(0)"><a href="#">TAB-1</a></li> 
		<li onclick="setTab(1)"><a href="#">TAB-2</a></li> 
		<li onclick="setTab(2)"><a href="#">TAB-3</a></li> 
	</ul>
	<ul id="contents">
	    <li class="current">Content-1</li>
		<li class="hide">Content-2</li>
		<li class="hide">Content-3</li>
	<ul>
</div>

function setTab(n){
		    var tli = document.getElementById("tabs").getElementsByTagName("li");
			var cli = document.getElementById("contents").getElementsByTagName("li");
			
			for(var i=0;i<tli.length;i++){
			    tli[i].className=i==n?"current":"";
				cli[i].className=i==n?"current":"hide";
			}
			
		 }

CSS

body {
	background: #FFF;
	color: #000;
	font: 62.5% "Lucida Grande", Verdana, Geneva, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

ul{
    padding:0;
	margin:0;
	list-style:none;
}

li{
   padding:10px;
}

.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		font-size: 0;
		clear: both;
		visibility: hidden;
		}
		 
.clearfix {
		zoom: 1;
}


#tab{
    width:600px;
	margin:100px auto;
}

#tabs li{
	float:left;
}

.current{
    background:#EEE;
	display:block;
}

.hide{
    display:none;
}

jQuery写法

    $(document).ready(function(){
		$("#contents > li").hide();
		$("#tabs li:first").addClass("current").show();
		$("#contents li:first").addClass("current").show();
		
		$("#tabs li").click(function(){
		   $("#contents > li").hide();
		   $("#tabs li").removeClass("current");
		   $(this).addClass("current");
		   
		   var activeTab = $(this).find("a").attr("href");
		   $(activeTab).addClass("current").show();
		   
		});
    });

HTML

<div id="tab">
	<ul id="tabs" class="clearfix"> 
		<li><a href="#content_1">TAB-1</a></li>
		<li><a href="#content_2">TAB-2</a></li>
		<li><a href="#content_3">TAB-3</a></li>
	</ul>
	<ul id="contents">
	    <li id="content_1">Content-1</li>
		<li id="content_2">Content-2</li>
		<li id="content_3">Content-3</li>
	<ul>
</div>

1. Javascirpt 写法在于利用setTab()函数传参数,通过参数将tabs>li与 contents>li配对.

2. jQuery写法利用href属性获取参数, 通过href参数值配对.

3. HTML有所区别