Home>

First, the main program

<! Doctype html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>tab</title>
 <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
 <!-The overall structure,Use ul to complete the horizontal layout of the button,Use a div to complete the vertical layout of the three content frames (similar to a class table), and then hide all three content frames.
Only the first frame content is displayed by the following:first-child attribute->
 <div>
 <div>
 <ul>
 <li>Reality</li>
 <li>Politics</li>
 <li>Sports</li>
 </ul>
 </div>
 <div>
 <div>Actual content</div>
 <div>Political content</div>
 <div>sports content</div>
 </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
 <script type="text/javascript" src="js/layout.js"></script>
 </body>
</html>

Second, css style

Initial layout code:

* {margin:0;padding:0}
ul {
 list-style:none;
}
.tab {
 width:300px;
 margin:0 auto;
}
.tab .tab_menu {
 border:1px solid #000000;
 height:30px;
 width:300px;
}
.tab .tab_menu ul li {
 float:left;
 width:99px;
 text-align:center;
 line-height:30px;
 border-right:1px #333333 solid;
}
.tab .tab_menu ul li:last-child {
 border-right:none;
 width:100px;
}
.tab .tab_menu ul li.on {
 background:#999;
}
.tab .tab_box>div {
 width:300px;
 height:200px;
 border:#333333 solid;
 border-width:0 1px 1px 1px;
}

The layout of the above code is as follows:

But we only need the content in a frame to display,So on the premise of the above code, add some small code assistance ~~~~~~

Further layout style code:

* {margin:0;padding:0}
ul {
 list-style:none;
}
.tab {
 width:300px;
 margin:0 auto;
}
.tab .tab_menu {
 border:1px solid #000000;
 height:30px;
 width:300px;
}
.tab .tab_menu ul li {
 float:left;
 width:99px;
 text-align:center;
 line-height:30px;
 border-right:1px #333333 solid;
}
.tab .tab_menu ul li:last-child {
 border-right:none;
 width:100px;
}
.tab .tab_menu ul li.on {
 background:#999;
}
.tab .tab_box>div {
 width:300px;
 height:200px;
 border:#333333 solid;
 border-width:0 1px 1px 1px;
 display:none;//Hide all three content frames,Use the following:first-child property to display only the first frame content
}
.tab .tab_box>div:first-child {
 display:block;
}

The above program gives.tab .tab_box>div style adds one more display:none, and also displays only the first frame content through the:first-child property The animation effect picture kept the same,The layout is also completed ~~~~~~

Third, jquery code:

$(function () {
 $(". tab_menu ul li"). click (function () {
 $(this) .addclass ("on"). siblings (). removeclass ("on");//Toggle selected button highlighting
 var index=$(this) .index ();//Get the index value of the pressed button,Note that index starts from 0
 $(". tab_box>div"). eq (index) .show (). siblings (). hide ();//When the button is selected, the corresponding content is displayed below,Also hide unwanted frame content
 });
});
  • Previous Restful passing array parameters and annotations
  • Next How to convert Chinese characters into pinyin based on PHP