點(diǎn)擊顯示指定元素隱藏其他同輩元素的方法
更新時(shí)間：2014年02月19日 16:54:07 作者：
點(diǎn)擊顯示指定元素并隱藏其他同輩元素，下面有個(gè)不錯(cuò)的方法,需要的朋友可以參考下
復(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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.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)的話，會(huì)引起錯(cuò)誤。如果里面還有div
.eq(index).show() //顯示 <li>元素對(duì)應(yīng)的<div>元素
.siblings().hide(); //隱藏其它幾個(gè)同輩的<div>元素
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
})
})
//]]>
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">時(shí)事</li>
<li>體育</li>
<li>娛樂</li>
</ul>
</div>
<div class="tab_box">
<div>時(shí)事</div>
<div class="hide">體育</div>
<div class="hide">娛樂</div>
</div>
</div>
</body>
</html>
相關(guān)文章
Bootstrap Navbar Component實(shí)現(xiàn)響應(yīng)式導(dǎo)航
這篇文章主要介紹了Bootstrap Navbar Component實(shí)現(xiàn)響應(yīng)式導(dǎo)航的相關(guān)資料,講解了Bootstrap Navbar應(yīng)用及源碼解析，需要的朋友可以參考下2016-10-10
使用threejs實(shí)現(xiàn)第一人稱視角的移動(dòng)的問題(示例代碼)
第一人稱視角的場景巡檢主要需要解決兩個(gè)問題，人物在場景中的移動(dòng)和碰撞檢測。移動(dòng)與碰撞功能是所有三維場景首先需要解決的基本問題，今天我們就通過最基本的threejs來完成第一人稱視角的場景巡檢功能，感興趣的朋友一起看看吧2022-02-02
JavaScript如何獲取到導(dǎo)航條中HTTP信息
這篇文章主要為大家詳細(xì)介紹了JavaScript如何獲取到導(dǎo)航條中HTTP信息，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
window對(duì)象的alert和confirm標(biāo)準(zhǔn)方法在不同瀏覽器的顯示效果不太相同，有個(gè)相同點(diǎn)是都不是很美觀。本文對(duì)此解決方法進(jìn)行介紹：使用js和css分別仿照它們，提供另一套函數(shù)，使在不同瀏覽器的有著相同的體驗(yàn)效果。下面就跟小編一起來看下吧2016-12-12
這篇文章介紹了使用js修改客戶端注冊(cè)表的方法，有需要的朋友可以參考一下2013-08-08
JavaScript 實(shí)現(xiàn)打印,打印預(yù)覽,打印設(shè)置
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)打印,打印預(yù)覽,打印設(shè)置的方法及示例分享,需要的朋友可以參考下2014-12-12
javascript圖像處理—邊緣梯度計(jì)算函數(shù)
上一篇文章，我們講解了圖像處理中的膨脹和腐蝕函數(shù)，這篇文章將做邊緣梯度計(jì)算函數(shù)，感興趣的朋友可以了解下2013-01-01
Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)
這篇文章主要介紹了Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)的相關(guān)資料,需要的朋友可以參考下2016-05-05
javascript阻止scroll事件多次執(zhí)行的思路及實(shí)現(xiàn)
阻止scroll事件多次執(zhí)行主要是為了解決一些常見網(wǎng)頁特效在js解析時(shí)預(yù)期與效果不同，感興趣的朋友可以了解下2013-11-11
bootstrap實(shí)現(xiàn)的自適應(yīng)頁面簡單應(yīng)用示例
這篇文章主要介紹了bootstrap實(shí)現(xiàn)的自適應(yīng)頁面簡單應(yīng)用,結(jié)合具體實(shí)例形式分析了基于bootstrap的列表布局結(jié)構(gòu)頁面實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2017-03-03