萬盛學電腦網 >> 腳本專題 >> javascript >> 點擊顯示指定元素並隱藏其他同輩元素
點擊顯示指定元素並隱藏其他同輩元素
點擊顯示指定元素並隱藏其他同輩元素，下面有個不錯的方法,需要的朋友可以參考下
代碼如下: <!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") //選取子節點。不選取子節點的話，會引起錯誤。如果裡面還有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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved