Implement Multi-tab switch based on jQuery (web Front-end development), jqueryweb

Implement Multi-tab switch based on jQuery (web Front-end development), jqueryweb

Here, there are two ways to implement the multi-tab effect: one is based on DOM and the other is based on jquery. This time, I wrote a different phone package to display different tabs.

Method 1:

First, we need to write the general frame and style of the page. The html and css code is as follows:

<Ul id = "tab"> <li id = "tab1" onclick = "show (1) "> 10 yuan package </li> <li id =" tab2 "onclick =" show (2) "> 30 RMB package </li> <li id =" tab3 "onclick =" show (3) "> 50 RMB subscription </li> </ul> <div id =" container "> <div id =" content1 "style =" z-index: 1; "> 10 yuan package details: <br/> the monthly package calls 100 minutes, excess Part 2 hair/minute </div> <div id = "content2"> 30 yuan package details: <br/> call 300 minutes in the monthly package, more than 1.5 hairs/minute </div> <div id = "content3"> 50 RMB monthly subscription details: <br/> unlimited monthly subscription </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 static interface is as follows:

Now, you are writing javascript code to achieve dynamic results. The corresponding page will be displayed when you click the tag. 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 the 30 yuan package. The page is displayed:

When you click "50 RMB subscription", the following page appears:

Method 2: Based on jquery, first we need to introduce the jquery-1.11.3.js file in the html page

Html code (css style code is the same as method 1 ):

<Ul id = "tab"> <li id = "tab1" value = "1"> 10 RMB package </li> <li id = "tab2" value = "2"> 30 RMB package </li> <li id = "tab3" value = "3"> 50 RMB monthly subscription </li> </ul> <div id = "container"> <div id = "content1" style = "z-index: 1; "> 10 yuan package details: <br/> the monthly package calls 100 minutes, excess Part 2 hair/minute </div> <div id = "content2"> 30 yuan package details: <br/> call 300 minutes in the monthly package, more than 1.5 hairs/minute </div> <div id = "content3"> 50 RMB monthly subscription details: <br/> unlimited monthly subscription </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 final effect is the same as method 1.

The above section describes how to implement multi-tab switch based on jQuery (web Front-end development). I hope it will be helpful to you, if you want to stay close to your home, please stay tuned to the help house!