溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

超好用的簡單的jquery tab選項(xiàng)卡切換代碼（點(diǎn)擊切換和導(dǎo)航欄滑過）

發(fā)布時間：2020-03-28 12:49:21 來源：網(wǎng)絡(luò) 閱讀：791 作者：小旭依然 欄目：web開發(fā)

實(shí)例1（點(diǎn)擊切換）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
 *{ margin:0; padding:0;}
 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
 .tab { width:240px;margin:50px;}
 .tab_menu { clear:both;}
 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
 .tab_menu li.hover { background:#DFDFDF;}
 .tab_menu li.selected { color:#FFF; background:#6D84B4;}
 .tab_box { clear:both; border:1px solid #898989; height:100px;}
 .hide{display:none}
</style>
<!--   引入jQuery -->
 <script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript" >
//<![CDATA[
	$(function(){
	    var $div_li =$("div.tab_menu ul li");
	    $div_li.click(function(){
			$(this).addClass("selected")            //當(dāng)前<li>元素高亮
				   .siblings().removeClass("selected");  //去掉其它同輩<li>元素的高亮
            var index =  $div_li.index(this);  // 獲取當(dāng)前點(diǎn)擊的<li>元素 在 全部li元素中的索引。
			$("div.tab_box > div")   	//選取子節(jié)點(diǎn)。不選取子節(jié)點(diǎn)的話，會引起錯誤。如果里面還有div 
					.eq(index).show()   //顯示 <li>元素對應(yīng)的<div>元素
					.siblings().hide(); //隱藏其它幾個同輩的<div>元素
		}).hover(function(){
			$(this).addClass("hover");
		},function(){
			$(this).removeClass("hover");
		})
	})
//]]>
</script>
</head>
<body>

<div class="tab">
	<div class="tab_menu">
		<ul>
			<li class="selected">時事</li>
			<li>體育</li>
			<li>娛樂</li>
		</ul>
	</div>
	<div class="tab_box"> 
		 <div>時事</div>
		 <div class="hide">體育</div>
		 <div class="hide">娛樂</div>
	</div>
</div>

</body>
</html>

瀏覽器效果：

超好用的簡單的jquery tab選項(xiàng)卡切換代碼（點(diǎn)擊切換和導(dǎo)航欄滑過）

實(shí)例2（導(dǎo)航欄滑過）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠標(biāo)滑過jQuery選項(xiàng)卡切換</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
/* case */
.case{width:960px;margin:100px auto;background:#fff;padding:15px;box-shadow:0 0 10px #ccc;}
.case .title{height:20px;border-bottom:3px solid #e7e7e7;padding-bottom:10px;}
.case .title h3{font-size:20px;font-family:"microsoft yahei";}
.case .title-list{position:relative;top:6px;}
.case .title-list li{width:146px;line-height:20px;text-align:center;float:left;display:inline;cursor:pointer}
.case .title-list li.on{color:#ff6600;font-weight:bold;}
.case .title-list span{position:absolute;top:24px;left:0px;width:146px;height:7px;border-top:3px solid #ff6600;overflow:hidden;text-align:center;}

.product{position:relative;display:none;margin-top:20px; height:auto}
.product ul{}
.product-wrap .show{display:block;}
</style>
//<![CDATA[
<script type="text/javascript">
$(function(){	
		   
	//設(shè)計案例切換
	$('.title-list li').click(function(){
		var liindex = $('.title-list li').index(this);
		$(this).addClass('on').siblings().removeClass('on');
		$('.product-wrap div.product').eq(liindex).fadeIn(10).siblings('div.product').hide();
		var liWidth = $('.title-list li').width();
		$('.case .title-list span').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);
	});
	

});
</script>
//]]>
</head>
<body>

<div class="case">

	<div class="title">
	
		<ul class="title-list">
			<li class="on">LOGO</li>
			<li>宣傳單</li>
			<li>畫冊</li>
			<span><</span>
		</ul>
	</div>
	
	<div class="product-wrap">
		<!--案例1-->
		<div class="product show">
			<ul class="cf">
				<li class="ml0">
					<a ></a>
					<p class="mt10"> <a >站長素材網(wǎng)站logo... </a></p>
					<p class="pb10">行業(yè)類別：藝術(shù)攝影,文化體育</p>
				</li>
				<li>
					<a ></a>
					<p class="mt10"> <a > 深圳達(dá)文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業(yè)類別：藝術(shù)攝影,文化體育</p>
				</li>
				<li>
					<a ></a>
					<p class="mt10"> <a > 深圳達(dá)文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業(yè)類別：藝術(shù)攝影,文化體育</p>
				</li>
				<li>
					<a ></a>
					<p class="mt10"> <a > 深圳達(dá)文影視傳媒有限公司logo... </a></p>
					<p class="pb10">行業(yè)類別：藝術(shù)攝影,文化體育</p>
				</li>
			</ul>
		</div>
		
		<!--案例2-->
		<div class="product">
		2
		</div>
		
		<!--案例3-->
		<div class="product">
			3
		</div>
		
		
	</div>
</div>

</body>
</html>

瀏覽器效果：

超好用的簡單的jquery tab選項(xiàng)卡切換代碼（點(diǎn)擊切換和導(dǎo)航欄滑過）

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手