JS Practice----Tab TAB Bar Toggle

Source: Internet
Author: User

JS effect for mouse move to different tab display corresponding Div

**js Ideas :

 1. Find each label by ID or getElementsByTagName or by other means, here are clothing, home appliances, food, entertainment labels

* Register mouse events by looping through each tag, and set a property for each tag, giving the attribute value, this is to correspond to the following Div, in the following div by obtaining the Set property value can be corresponding to the corresponding cousin

* Content of mouse events: When registering events for each tag, the background of each tag including this tag is empty, and then a different background is given for the label of the current execution event.

2. Obtain the following DIV (this step is performed within the mouse event) by ID or other means

* After the previous step gives the label of the execution event a different background, the previously set property value is obtained by getattribute

* and then traverse each div, walk the first to make each div hidden, and then the subscript jade to get the same attribute value of the div display

* * Full code:

<! DOCTYPE html>
<meta charset= "UTF-8";
<title>tab </title>
<style type= "Text/css";
*{
Margin:auto auto;
}
. bd{
margin-top:100px;
width:200px;
height:30px;
}
. BD span{
Background: #eee;
margin-left:1px;
Display:block;
Float:left;
Font-size:16px;
Display:block;
padding:5px;
Border-radius:6px;
}
. bg{
Background: #e87c3b;
}
. hd{
width:200px;
height:80px;
margin-top:10px;
Position:relative;
}
. sjx{
width:0px;
height:0px;
border-top:5px solid #fff;
border-right:5px solid #fff;
Bord er-left:5px solid #fff;
border-bottom:10px solid #e87c3b;
Position:absolute;
top:-100%;

}
. HD div{
width:200px;
Height:auto;
Background: #e87c3b;
padding-bottom:20px;
}
. show{
Display:block;
}
. hidden{
Display:none;
}
ul,li{
List-style:none;
}
ul{
margin:0;
padding:10px;
}
</style>
<body>
<div class= "BD" id= "D";
<span> Costume </ Span>,
<span> household appliances </span>
<span> diet </span>
<span> Entertainment </span>

</div>
<div class= "HD" id= "HD";

<div style= "Display:block;"
<ul>
<li> top </li>
<li> </li>
<li> trousers </li>
<li > Dresses </li>
</ul>

</div>
<div style= "display:none;padding-bottom:20px;"
<ul>
<li> TV </li>
<li> refrigerator </li>
<li> washing machine </li>
< li> air conditioning </li>
<li> vacuum cleaner </li>
</ul>
</div>
<div style= "Display:none;"
<ul>
<li> vegetables </li>
<li> fruit </li>

</ul>
</div>
<div style= "Display:none;" > Entertainment module </div>

</div>
<div class= "SJX" ></div>
<script type= "Text/javascript" >
var spans=document.getelementsbytagname ("span");
var len=spans.length;

for (Var i=0;i<len;i++) {
var span=spans[i];
Span.setattribute (' index ', i);
Span.onmouseover=function () {
for (Var j=0;j<len;j++) {
Spans[j].style.background= ";
}
This.style.background= ' #e87c3b ';
var index=parseint (This.getattribute (' index '));

var divs=document.queryselectorall (' #hd div ');
var divlen=divs.length;
for (Var x=0;x<divlen;x++) {
Divs[x].style.display= "None";

}

divs[index].style.display= ' block ';

};

}
</script>
</body>

      

  

JS Practice----Tab TAB Bar Toggle

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.