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)