JavaScript---dom big programming 2

Source: Internet
Author: User

Programming challenges

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

Task

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:;" &GT;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

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.