溫馨提示×

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

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

jquery打造的多個(gè)選項(xiàng)卡菜單

發(fā)布時(shí)間：2020-06-01 11:52:42 來(lái)源：網(wǎng)絡(luò) 閱讀：244 作者：sanye123 欄目：web開(kāi)發(fā)

<!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>
<title>jquery打造的多個(gè)選項(xiàng)卡菜單_網(wǎng)頁(yè)代碼站(www.webdm.cn)</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" >

$(function(){
var wweya_li =$("div.tab_menu ul li");
wweya_li.click(function(){
$(this).addClass("selected") //當(dāng)前<li>元素高亮
.siblings().removeClass("selected"); //去掉其它同輩<li>元素的高亮
var index = wweya_li.index(this); // 獲取當(dāng)前點(diǎn)擊的<li>元素 在 全部li元素中的索引。
$("div.tab_box > div") //選取子節(jié)點(diǎn)。不選取子節(jié)點(diǎn)的話，會(huì)引起錯(cuò)誤。如果里面還有div
.eq(index).show(100) //顯示 <li>元素對(duì)應(yīng)的<div>元素
.siblings().hide(); //隱藏其它幾個(gè)同輩的<div>元素 }).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
})
})
</script>
<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}
h2 { margin:80px; line-height:90px; font-size:16px; color:#999; text-align:center; border-top:1px solid #ddd;}
</style>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">星座</li>
<li>時(shí)尚</li>
<li>娛樂(lè)</li>
</ul>
</div>
<div class="tab_box">
<div>雙魚(yú)座</div>
<div class="hide">時(shí)尚潮流</div>
<div class="hide">娛樂(lè)八卦</div>
</div>
<div class="tab_menu">
<ul>
<li class="selected">星座</li>
<li>時(shí)尚</li>
<li>娛樂(lè)</li>
</ul>
</div>
<div class="tab_box">
<div>雙魚(yú)座</div>
<div class="hide">時(shí)尚潮流</div>
<div class="hide">娛樂(lè)八卦</div>
</div>
</div>
<p> </p>
<p>可以無(wú)限 但一定要配對(duì)出現(xiàn)</p>
<p> </p>
<div class="tab_menu">
<ul>
<li class="selected">星座</li>
<li>時(shí)尚</li>
<li>娛樂(lè)</li>
</ul>
</div>
<div class="tab_box">
<div>雙魚(yú)座</div>
<div class="hide">時(shí)尚潮流</div>
<div class="hide">娛樂(lè)八卦</div>
</div>
<h2>by <a href="/" target="_blank">網(wǎng)頁(yè)代碼站</a></h2>
<br />
<p><a >網(wǎng)頁(yè)代碼站</a> - 最專(zhuān)業(yè)的網(wǎng)頁(yè)代碼下載網(wǎng)站 - 致力為中國(guó)站長(zhǎng)提供有質(zhì)量的網(wǎng)頁(yè)代碼！</p>
</body>
</html>

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

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

AI
助
手