Option card package tab (passing parameters) (no animated version)

I ,.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/4D/BE/wKiom1RYmIKTT50OAAI8UgV3P-k534.jpg "Title =" qq 411000000934.png "alt =" wKiom1RYmIKTT50OAAI8UgV3P-k534.jpg "/>

2. html + CSS.

<Style>
* {Padding: 0; margin: 0; font-size: 12px ;}
Li {list-style: none ;}
A {text-Decoration: none ;}
. Clear: After {content: ''; display: block; clear: Both ;}
. Clear {ZOOM: 1 ;}

. Box {width: 958px; Border: 1px solid # c6c6c6; Height: 328px; margin: 90px auto ;}
. Left {width: 168px; float: Left ;}
. Right {width: 790px; float: Right; overflow: hidden ;}

. List_btn Li {width: 168px; Height: 80px; border-top: 1px solid # FFF; border-bottom: 1px solid # c6c6c6; Background: # e7e7e7; font-size: 30px; text-align: center; line-Height: 80px; color: #333; cursor: pointer; font-weight: bold ;}
. List_btn. Active {Background: # FFF ;}

. List_box {display: none ;}
. List_box IMG {width: 790px; Height: 328px ;}

. Right_par {position: relative; Height: 328px; display: none ;}
. BTN {Height: 30px; width: 820px; position: absolute; left: 0; bottom: 0 ;}
. BTN Li {width: 272px; border-Right: 1px solid # FFF; Background: #5a5a52; cursor: pointer; Height: 30px; float: Left; color: # FFF; font-size: 14px; text-align: center; line-Height: 30px ;}
. Btn1 Li {width: 197px ;}
. Btn2 Li {width: 160px ;}
. BTN. curr {Background: # ef1_3 ;}
</Style>

<Div class = "box">

<Div class = "Left">
<Ul class = "list_btn" id = "list_btn">
<Li class = "active"> luxury cars </LI>
<Li> furniture </LI>
<Li> wallpaper </LI>
<Li> cake </LI>
</Ul>
</Div>
<Div class = "right" id = "right">
<Div class = "right_par" style = "display: block;">
<Div class = "list_par" id = "list_par">
<Div class = "list_box" style = "display: Block"> </div>
<Div class = "list_box"> </div>
<Div class = "list_box"> </div>
</Div>
<Ol class = "BTN" id = "BTN">
<Li class = "curr"> luxury car 1 </LI>
<Li> luxury car 2 </LI>
<Li> luxury three </LI>
</OL>
</Div>
<Div class = "right_par">
<Div class = "list_par" id = "list_par1">
<Div class = "list_box"> </div>
<Div class = "list_box"> </div>
<Div class = "list_box"> </div>
<Div class = "list_box" style = "display: Block"> </div>
</Div>
<Ol class = "BTN btn1" id = "btn1">
<Li> Furniture 1 </LI>
<Li> Furniture 2 </LI>
<Li> furniture 3 </LI>
<Li class = "curr"> furniture 4 </LI>
</OL>
</Div>
<Div class = "right_par">
<Div class = "list_par" id = "list_par2">
<Div class = "list_box"> </div>
<Div class = "list_box"> </div>
<Div class = "list_box" style = "display: Block"> </div>
<Div class = "list_box"> </div>
<Div class = "list_box"> </div>
</Div>
<Ol class = "BTN btn2" id = "btn2">
<Li> wallpaper 1 </LI>
<Li> wallpaper 2 </LI>
<Li class = "curr"> wallpaper 3 </LI>
<Li> wallpaper 4 </LI>
<Li> wallpaper 5 </LI>
</OL>
</Div>
<Div class = "right_par">
<Div class = "list_par" id = "list_par3">
<Div class = "list_box" style = "display: Block"> </div>
<Div class = "list_box"> </div>
<Div class = "list_box"> </div>
</Div>
<Ol class = "BTN" id = "btn3">
<Li class = "curr"> cake 1 </LI>
<Li> cake 2 </LI>
<Li> cake 3 </LI>
</OL>
</Div>
</Div>

</Div>

Iii. JavaScript.

VaR odiv = Document. getelementbyid ('right ');
VaR adiv = odiv. getelementsbytagname ('div ');
VaR oul = Document. getelementbyid ('list _ BTN ');
VaR Ali = oul. getelementsbytagname ('lil ');

VaR adivarr = [];
For (VAR I = 0; I <adiv. length; I ++ ){

If (adiv [I]. classname = 'right _ par '){
Adivarr. Push (adiv [I]);
}
}
For (VAR I = 0; I <Ali. length; I ++ ){
Ali [I]. Index = I;
Ali [I]. onclick = function (){
For (VAR I = 0; I <Ali. length; I ++ ){
Ali [I]. classname = '';
Adivarr [I]. style. Display = 'none ';
}
This. classname = 'active ';
Adivarr [This. Index]. style. Display = 'block ';
}
}

Fnparam ('list _ par', 'btn ', 'onclick ');
Fnparam ('list _ par1', 'btn1 ', 'onmouseover ');
Fnparam ('list _ par2', 'btn2', 'onclick ');
Fnparam ('list _ par3', 'btn3', 'onmouseover ');

}

Function fnparam (odiv, ool, EVT ){




VaR odivtwo = Document. getelementbyid (odiv );
VaR adivtwo = odivtwo. getelementsbytagname ('div ');
VaR ool = Document. getelementbyid (ool );
VaR alitwo = ool. getelementsbytagname ('lil ');


VaR adivtwoarr = [];

// Var oldli = alitwo [0]; // It must be synchronized with the initialization.



For (VAR I = 0; I <adivtwo. length; I ++) {// multiple divs may be used for layout. Here, the layout is simply replaced by images.
If (adivtwo [I]. classname = 'list _ box '){
Adivtwoarr. Push (adivtwo [I]);
}
}

For (VAR I = 0; I <alitwo. length; I ++ ){
Alitwo [I]. Index = I
Alitwo [I] [EVT] = function (){
For (VAR I = 0; I <alitwo. length; I ++ ){
Adivtwoarr [I]. style. Display = 'none ';
Alitwo [I]. classname = '';
}
This. classname = 'curr ';
Adivtwoarr [This. Index]. style. Display = 'block ';

// Oldli. classname = ''; // clears the previous one, which is currently added.
// Oldli = this;
// This. classname = 'curr ';
}
}

Iv. jquery.

$ (Function (){

$ ('# List_btn li'). Click (function (){

$ ('# List_btn li'). ATTR ('class ','');
$ ('# Right .right_par'mirror.css ('display', 'None ');
$ (This). ATTR ('class', 'active ');
$ ('# Right .right_par'%.eq((this%.index(%%%.css ('display', 'block ');

});
Fnparam ('# BTN li', '# list_par. list_box', 'click ');
Fnparam ('# btn1 li', '# list_par1. list_box', 'mouseover ');
Fnparam ('# btn2 li', '# list_par2. list_box', 'click ');
Fnparam ('# btn3 li', '# list_par3. list_box', 'mouseover ');

})
Function fnparam (odiv, adiv, EVT ){

$ (Odiv). On (EVT, function (){

$ (Odiv). ATTR ('class ','');
Watermarks (adiv).css ('display', 'None ');
$ (This). ATTR ('class', 'curr ');
Certificate (adiv).eq((this).index()).css ('display', 'block ');

});


}

This article is from the "Shuai" blog and will not be reproduced!

Option card package tab (passing parameters) (no animated version)