點擊顯示指定元素隱藏其他同輩元素的方法
更新時間：2014年02月19日 16:54:07 作者：
點擊顯示指定元素并隱藏其他同輩元素，下面有個不錯的方法,需要的朋友可以參考下
復(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)前點擊的<li>元素 在 全部li元素中的索引。
$("div.tab_box > div") //選取子節(jié)點。不選取子節(jié)點的話，會引起錯誤。如果里面還有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>
相關(guān)文章
最近遇到一個小程序的開發(fā)需求,直接可以通過小程序就記錄運動軌跡,所以這篇文章主要給大家介紹了關(guān)于微信小程序記錄用戶移動軌跡的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細介紹了原生js實現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
當(dāng)網(wǎng)頁加載一個尺寸比較大的圖片時，往往會把一個網(wǎng)頁撐的變形，頁面變得很難看，于是我們就想到了用JS去控制超出一定范圍的圖片2013-08-08
JavaScript+Canvas創(chuàng)建一個獨特的字符畫生成器
這篇文章主要介紹了如何使用 Canvas 和 JavaScript 創(chuàng)建一個獨特的字符畫生成器,通過此生成器,我們可以將圖片轉(zhuǎn)換為由字符構(gòu)成的作品,感興趣的可以了解下2024-01-01
這篇文章主要為大家詳細介紹了js瀏覽器html5表單驗證,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了在css加載完畢后執(zhí)行后續(xù)代碼的方法,需要的朋友可以參考下2014-09-09
下面小編就為大家?guī)硪黄趇nput框覆蓋掉數(shù)字英文的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
JS如何從一個數(shù)組中隨機取出一個元素或者幾個元素呢？其實方法很簡單，下面小編給大家分享了JS隨機取出幾個數(shù)組元素的方法，非常不錯，需要的朋友參考下2016-08-08
webpack使用 babel-loader 轉(zhuǎn)換 ES6代碼示例
本篇文章主要介紹了webpack使用 babel-loader 轉(zhuǎn)換 ES6代碼 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
在前端開發(fā)中,判斷多個請求完畢是一個常見需求,這篇文章主要介紹了前端如何判斷多個請求完畢實戰(zhàn)及常見問題的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-03-03