點擊顯示指定元素隱藏其他同輩元素的方法
更新時間：2014年02月19日 16:54:07 作者：
點擊顯示指定元素并隱藏其他同輩元素，下面有個不錯的方法,需要的朋友可以參考下
復制代碼 代碼如下:
<!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") //當前<li>元素高亮
.siblings().removeClass("selected"); //去掉其它同輩<li>元素的高亮
var index = $div_li.index(this); // 獲取當前點擊的<li>元素 在 全部li元素中的索引。
$("div.tab_box > div") //選取子節(jié)點。不選取子節(jié)點的話，會引起錯誤。如果里面還有div
.eq(index).show() //顯示 <li>元素對應的<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>
相關文章
最近遇到一個小程序的開發(fā)需求,直接可以通過小程序就記錄運動軌跡,所以這篇文章主要給大家介紹了關于微信小程序記錄用戶移動軌跡的相關資料,需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細介紹了原生js實現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
當網(wǎng)頁加載一個尺寸比較大的圖片時，往往會把一個網(wǎng)頁撐的變形，頁面變得很難看，于是我們就想到了用JS去控制超出一定范圍的圖片2013-08-08
JavaScript+Canvas創(chuàng)建一個獨特的字符畫生成器
這篇文章主要介紹了如何使用 Canvas 和 JavaScript 創(chuàng)建一個獨特的字符畫生成器,通過此生成器,我們可以將圖片轉換為由字符構成的作品,感興趣的可以了解下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 轉換 ES6代碼示例
本篇文章主要介紹了webpack使用 babel-loader 轉換 ES6代碼 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
在前端開發(fā)中,判斷多個請求完畢是一個常見需求,這篇文章主要介紹了前端如何判斷多個請求完畢實戰(zhàn)及常見問題的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-03-03