Tonight, we come to realize with a simple tab switching code, the code only two main lines.
effect:
Thinking: explicit and implicit div style JQuery controlled by changing the switching
Which show that a div, the rest hidden
achieve:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} #content{ width: 200px; height: 200px; border:1px solid #ccc; overflow: hidden; margin-top: -1px; } button{ border:1px solid #ccc; outline:none; } .active{ background: white; border-bottom: 1px solid white; } #content>div{ width: 200px; height: 200px; } </style> </head> <body> <button class="active">按钮1</button> <button>按钮2</button> <button>按钮3</button> <div id="content"> <div>标签页11111</div> <div>div</Tabs 2222> < Div > tag page 3333 </ div > </ div > </ body > </ HTML > < Script the src = "jQuery-1.11.3.js" > </ Script > < Script > $ ( " Button " ) .click ( function () { // control to change the style of the current button to add style, his sibling brother removal of all styles $ ( the this ) .addClass ( ' the Active ' ) .siblings () removeClass (. ' the Active ' ); //Div explicit and implicit control of the current button corresponding div showed his brother the same level all the hidden $ ( " #content> div " ) .EQ ($ ( the this ) .index ()). CSS ( " Run the display " , " Block " .) .siblings () CSS ( " the display " , " none " ); }) </ Script >
Simple, in fact, as long as the ideas came out not that hard, I was asked today how to achieve this, the way you write about. We hope to help everyone