Home > Developer > JavaScript
Now take advantage of the JavaScript knowledge that we've learned before, to implement the effect of tab switching.
:
Text Material:
Property:
2.75 million purchase Changping Neighborhood Triathlon Total Price 200,000 buy a home
2 million within the five rings of the three 1.4 million home to the east third ring
Beijing 0 First pay property 530,000 buy East 5 ring 50 Ping
Beijing real estate straight down 5000 Citic House Park house Wang existing
Home:
40 Flat rental house big makeover beauty girl's mixed up small nest
Classic Fresh Jean Home 90 flat old room glow Renaissance
New Chinese cool color warmth 66 flat contrast lively home
Tiles are like choosing a wife. Design of the flue in the bathroom
Secondary:
Tongzhou Luxury 3 2,600,002 ring scarce 2 250w Dump
West 3-Ring permeability 2 29,001,300,002-bedroom Limited
Yellow Cheng Gen Primary School District only 2,600,121 Ping 700,000 throw!
Exclusive villa 2.8 million Suzhou Bridge 2 special price 2.48 million
We first think and analyze the implementation of ideas, and then in the hands of the implementation
First, HTML page layout
Tip: The title of the TAB uses UL. Li tab content using div
Second, CSS style production
Tip: Style settings tab title for the entire tab style settings the style setting of the contents of the content is initially displayed only one tab content, and the other tab contents are hidden.
Third, JS implementation tab switch
Tip: Get tab title and tab Contents tab content multiple, need to loop through to manipulate, know which tab and which option content matches by changing Dom CSS class name, Current Click tab Display, other hidden.
The ============================================== code is as follows ==========================
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Practice Questions-Tabs </title>
<style type= "Text/css" >
/* CSS style creation */
*{margin:0;padding:0;font:normal 12px "Microsoft Jas Black"; color: #000000;}
Ul{list-style-type:none;}
A{text-decoration:none;}
#tab-list{width:275px;height:190px;margin:20px Auto;}
#ul1 {border-bottom:2px solid #8B4513; height:32px;}
#ul1 li{display:inline-block;width:60px;line-height:30px;text-align:center;border:1px solid #999; Border-bottom: none;margin-left:5px;}
#ul1 Li:hover{cursor:pointer;}
#ul1 li.active{border-top:2px solid #8B4513; border-bottom:2px solid #FFFFFF;}
#tab-list div{border:1px solid #7396B8; border-top:none;}
#tab-list div li{height:30px;line-height:30px;text-indent:8px;}
. Show{display:block;}. Hide{display:none;}
</style>
<script type= "Text/javascript" >
Window.onload = function () {
var oUl1 = document.getElementById ("Ul1");
var aLi = oul1.getelementsbytagname ("Li");
var odiv = document.getElementById ("Tab-list");
var adiv = odiv.getelementsbytagname ("div");
for (var i = 0; i < ali.length; i++) {
Ali[i].index = i;
Ali[i].onmouseover = function () {
for (var i = 0; i < ali.length; i++) {
Ali[i].classname = "";
}
This.classname = "active";
for (var j = 0; J < Adiv.length; J + +) {
Adiv[j].classname = "Hide";
}
Adiv[this.index].classname = "show";
}
}
}
</script>
<body>
<!--HTML page layout--
<div id= "Tab-list" >
<ul id= "UL1" >
<li class= "Active" > Real estate </li><li> home </li><li> Resale </li>
</ul>
<div>
<ul>
<li><a href= "javascript:;" >275 the total price of Changping neighborhood triathlon 200,000 buy one </a></li>
<li><a href= "javascript:;" >200 in the five rings of the three-home 1.4 million East third ring </a></li>
<li><a href= "javascript:;" > Beijing 0 First pay property 530,000 buy East 5 ring 50 flat </a></li>
<li><a href= "javascript:;" > property straight down 5000 Citic House Park Wang existing house </a></li>
</ul>
</div>
<div class= "Hide" >
<ul>
<li><a href= "javascript:;" >40 Flat rental house big makeover beauty girl's mixed-up small nest </a></li>
<li><a href= "javascript:;" > Classic Fresh Jean Home 90 flat old room glow Renaissance </a></li>
<li><a href= "javascript:;" > New Chinese cool color warmth 66 Flat contrast lively home </a></li>
<li><a href= "javascript:;" > Tiles It's like choosing a wife. Design of the toilet flue </a></li>
</ul>
</div>
<div class= "Hide" >
<ul>
<li><a href= "javascript:;" > Tongzhou Luxury 3 2,600,002 ring scarce 2 250w dump </a></li>
<li><a href= "javascript:;" > West 3 ring Permeability 2 29,001,300,002 Limited Sale </a></li>
<li><a href= "javascript:;" > Huang Cheng Gen Elementary School District only 2,600,121 flat 700,000 throw!</a></li>
<li><a href= "javascript:;" > Exclusive Villa 2.8 million Suzhou Bridge 2 discount price 2.48 million </a></li>
</ul>
</div>
</div>
</body>
=====================
JavaScript---dom big programming 2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
