Click the method that shows the specified element hiding other peer elements

  • 2020-03-30 01:46:33
  • OfStack

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
<html xmlns=""> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<!--  The introduction of jQuery --> 
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> 
<script type="text/javascript" > 
var $div_li =$("div.tab_menu ul li"); 
$(this).addClass("selected") //The current <Li> Elements are highlighted
.siblings().removeClass("selected"); //Remove other peers <Li> The highlight of the element
var index = $div_li.index(this); //Gets the currently clicked <Li> The index of the element in all li elements.
$("div.tab_box > div") //Select the child node. Not selecting child nodes causes an error. If you have div inside
.eq(index).show() //Display <Li> Elements corresponding to <Div> The element
.siblings().hide(); //Hiding several other peers <Div> The element

<div class="tab"> 
<div class="tab_menu"> 
<li class="selected"> Current affairs </li> 
<li> sports </li> 
<li> entertainment </li> 
<div class="tab_box"> 
<div> Current affairs </div> 
<div class="hide"> sports </div> 
<div class="hide"> entertainment </div> 


Related articles: