"2017-4-2" JS navigation bar tab

First, navigation bar

<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/> <title></title> <style type="Text/css">. div1 {width:100px;            height:50px; Background-color:red; float: Left; Margin-right:10px;        position:relative;            }. div2 {width:100px;            height:230px; Background-Color:green; float: Left; Margin-right:10px;            Position:absolute;            top:50px;        Display:none; }    </style>class="Div1"Id="div_1"> <divclass="Div2"> </div> </div> <divclass="Div1"Id="div_2"> <divclass="Div2"> </div> </div> <divclass="Div1"Id="Div_3"> <divclass="Div2"> </div> </div> <divclass="Div1"Id="Div_4"> <divclass="Div2"> </div> </div> <divclass="Div1"Id="div_5"> <divclass="Div2"> </div> </div></body>"Text/javascript">varA = Document.getelementsbyclassname ('Div1'); varb = Document.getelementsbyclassname ('Div2');  for(vari =0; i < a.length; i++) {        //Mouse Move inA[i].index = i;//record a value of type int so that DIV1 and div2 correspond to the corresponding drop-down menu when the mouse moves in and outA[i].onmouseover =function () {a[ This. Index].style.backgroundcolor ='Purple';//Div1 Color When mouse is moved inb[ This. Index].style.display ='Block'; }        //Mouse RemovalA[i].onmouseout =function () {a[ This. Index].style.backgroundcolor ='Red';//Div1 restores the original color when the mouse is removedb[ This. Index].style.display ='None'; }    }</script>

Two, Tab

<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/> <title></title> <style type="Text/css">. div1 {width:100px;            height:30px; float: Left; Margin-right:10px; Background-color:red; }    </style> <style type="Text/css">. div2 {top:40px; Background-Color:blue;            width:540px;            height:300px;            Position:absolute; Z-index: -; }    </style>class="Div1"Id="D1"></div> <divclass="Div1"Id="D2"></div> <divclass="Div1"Id="D3"></div> <divclass="Div1"Id="D4"></div> <divclass="Div1"Id="d5"></div> <divclass="Div2"Id="da"style="z-index:101;">111</div> <divclass="Div2"Id="DB">222</div> <divclass="Div2"Id="DC">333</div> <divclass="Div2"Id="de">444</div> <divclass="Div2"Id="DF">555</div></body>"Text/javascript">varA = Document.getelementsbyclassname ('Div1'); varb = Document.getelementsbyclassname ('Div2'); varCount =102;  for(vari =0; i < a.length; i++) {        //Mouse Move inA[i].onmouseover =function () {if( This. style.backgroundcolor! ='Black') {//when the mouse moves in, it turns yellow as long as it's not black.                 This. Style.backgroundcolor ='Yellow'; }        }        //Mouse Move outA[i].onmouseout =function () {if( This. Style.backgroundcolor = ='Yellow') {                 This. Style.backgroundcolor ='Red'; }        }        //Mouse clickA[i].index = i;//must be placed outside of the click event for a count comparisonA[i].onclick =function () { for(varj =0; J < A.length; J + +) {A[j].style.backgroundcolor='Red'; }             This. Style.backgroundcolor ='Black'; //Tab Toggleb[ This. Index].style.zindex =count; Count++; }    }</script>

"2017-4-2" JS navigation bar tab