The effect of multi-label page switching based on jquery (Web front-end development) _jquery

Here, there are two ways to implement a multiple-label page effect, one based on Dom and the other based on jquery, and this time I'm writing a different tab for a phone package that shows different tabs.

Method One:

First, we'll write down the general frame and style of the page, with HTML and CSS code as follows:

<ul id= "tab" >
<li id= "Tab1" onclick= "Show (1)" >10 Meta package </li>
<li id= "TaB2" onclick= "Show (2 ) ">30 package </li>
<li id=" Tab3 "onclick=" Show (3) ">50 Yuan monthly </li>
</ul>
<div id= "Container" >
<div id= "Content1" style= "z-index:1"; >
10 Package Details: <br/> 100 minutes per month package, exceeding part 2 cents/min
</div>
<div id= "Content2" >
30 Yuan Package Details: <br/> Monthly Package dial 300 minutes, beyond part 1.5 cents/min
</div>
<div id= "Content3" >
50 yuan Monthly details:< br/> Monthly Unlimited number of beats
</div>
</div>

The CSS style code is as follows:

*{
margin:0;
padding:0;
}
#tab li{
float:left;
List-style:none;
width:80px;
height:40px;
line-height:40px;
Cursor:pointer;
Text-align:center;
}
#container {
position:relative;
}
#content1, #content2, #content3 {
width:300px;
height:100px;
padding:30px;
Position:absolute;
top:40px;
left:0;
}
#tab1, #content1 {
background-color: #ffcc00;
}
#tab2, #content2 {
background-color: #ff00cc;
}
#tab3, #content3 {
background-color: #00ccff;
}

The resulting static interface is as follows:

Now, start writing JavaScript code, implement dynamic effect, click which tag, the corresponding page will be displayed, the code is as follows:

<script>
function Show (n) {
var curr=document.queryselector ("Div[style]");
Curr.removeattribute ("style");
document.getElementById ("Content" +n)
. style.zindex= "1";
}
</script>

The page effect is as follows:

Click 30 Yuan package, the appearance of the interface:

Click 50 Yuan Monthly, the appearance of the interface:

Method Two: Based on jquery, first we want to introduce the Jquery-1.11.3.js file in the HTML page

HTML code (CSS style code is the same as method one):

<ul id= "tab" >
<li id= "Tab1" value= "1" >10 Meta package </li>
<li id= "tab2" value= "2" >30 Meta package </ li>
<li id= "Tab3" value= "3" >50 yuan monthly </li>
</ul>
<div id= "container" >
< Div id= "Content1" style= "z-index:1;" >
10 Package Details: <br/> 100 minutes per month package, exceeding part 2 cents/min
</div>
<div id= "Content2" >
30 Yuan Package Details: <br/> Monthly Package within 300 minutes, exceeding part 1.5 cents/min
</div>
<div id= "Content3" >
50 Yuan Monthly details: <br/> Unlimited monthly play
</div>
</div>

The JS code is as follows:

<script>
$ ("#tab >li"). Click (function () {
console.log (this);
$ ("#content" +$ (This). Val ()). attr (' style ', ' z-index:1 '). Siblings ("div"). Removeattr ("style");
};
</script>

The effect of the final implementation is the same as method one

The above is a small set to introduce the implementation of multiple label page based on jquery effect (Web front-end development), hope to help everyone, if you want to leave home near more content please pay attention to cloud habitat community!