Home > Developer > Web Develop
The last section of the JavaScript Advanced Chapter is a tab switching program that requires the following effects.
Here are two blocks, one for the content toggle display, and one for the red border style toggle.
Content switching can be implemented with pure JS code, but when you need to set a red border style, JS will appear a lot of CSS code, so the unified use of classname switch is a better choice, different class styles can be set in the CSS file. So the task of JS only left to distinguish the onclick element and other elements of this one.
My first reaction was to add the ID of the <p> Content section to the property/home/second-hand housing, and set the style individually by if the ID is equal to the <li>.firstchild.nodevalue that triggers the onclick option. But here also involves the <li> itself of the style switch, and with an if judgment, obviously very troublesome, and will appear if this.firstchild.nodevalue==li[i].firstchild.nodevalue this inverse-day code. This is actually based on the style can be overridden, directly traversing all elements set non-click Style, and then get this to set the click Style is more convenient. It is as if the CSS code is used to initialize at the very beginning with *{margin:0px,padding:0px}, which is also an initialization idea.
This gives olis (each LI Element) an attribute index to hold I, because only attributes can follow the variable, and the OnClick event function only starts executing the code after the trigger, and I's loop runs out of the onload, The value of I will stay in Olis.length-1, which has no effect on the toggle style, but will affect the switching of the content, because Olis and Odivs are linked by I.
Window.onload=function () {
var Otabs=document.getelementbyid ("Tabs")
var olis=document.getelementsbytagname (' Li ');
var odivs=document.getelementsbytagname (' div ');
for (var i = 0; i < olis.length; i++) {
olis[i].index=i;
Olis[i].onclick=function () {
for (var n = 0; n < olis.length; n++) {
Olis[n].classname= "";
Odivs[n].classname= "Hide";
}
This.classname= "on";
odivs[this.index].classname= "";
}
}
}
HTML part: It's very concise now.
<body>
<div id= "Tabs" >
<ul>
<li class= "On" > Real estate </li>
<li> Home </li>
<li> Secondhand </li>
</ul>
<div>
<p>275 the total price of Changping neighborhood triathlon 200,000 buy one </p>
<p>200 in the five rings of the three-home 1.4 million East third ring </p>
<p> Beijing 0 First pay property 530,000 buy East 5 ring 50 flat </p>
<p> property straight down 5000 Citic House Park Wang existing house </p>
</div>
<div class= "Hide" >
<P>40 Flat rental house big makeover beauty girl's mixed-up small nest </p>
<p> Classic Fresh Jean Home 90 flat old room glow Renaissance </p>
<p> new Chinese cool color warmth 66 Flat contrast lively home </p>
<p> tiles It's like choosing a wife. Design of the toilet flue </p>
</div>
<div class= "Hide" >
<p> Tongzhou luxury 3 2,600,002 ring scarce 2 250w dump </p>
<p> West 3 ring permeability 2 29,001,300,002 Limited Sale </p>
<p> Huang Cheng Gen Elementary School District only 2,600,121 flat 700,000 throw!</p>
<p> exclusive villa 2.8 million Suzhou Bridge 2 discount price 2.48 million </p>
</div>
</body>
More complex is the CSS code, mu net answer is according to this way of thinking design border style, the red line bound in the UL Border-bottom. In the non-clickable state, Li has no lower border, and the red border is obscured by the 2px white in the click state. Of course, UL should be high, depending on the height of Li decision. will produce a detail problem is that the non-click Li plus the border is 29px, and UL is 30px height, so the bottom border of the label will have a 1px gap, can not bite the red border.
When I do it myself, I choose to use the red border as the top border of the DIV element and set the margin to -2px. So I don't need tabs div to frame the width of ul. But the problem of clearance still exists.
Another thing I'm not sure, Li's float:left and Display:inline-block theoretically is the same effect, I commented out the float will widen the gap between the label, 1px clearance magically disappeared. The code that commented out the display did not notice any changes. Check it out on the Internet. One is that Display:inline-block will produce double margins because there is a line break between Li in the HTML code, and it is normal to try to put it in a row. The gap still does not know why ....
*{padding:0px;margin:0px;font:12px normal "Microsoft Yahei"}
#tabs {width:290px;padding:5px;height:150px;margin:20px;}
#tabs ul{
Display:block;
height:30px;
line-height:30px;
border-bottom:2px SaddleBrown Solid;
}
#tabs ul li{
Background: #fff;
Cursor:pointer;
Float:left;
List-style:none;
height:28px;
line-height:28px;
margin:0px 3px;
border:1px solid #aaa;
Border-bottom:none;
Display:inline-block;
width:60px;
Text-align:center;
}
#tabs ul li.on{border-top:2px solid saddlebrown;
border-bottom:2px solid #fff;}
#tabs div{
height:120px;
line-height:25px;
border:1px solid #336699;
Border-top:none;
padding:5px;
}
. Hide{display:none;}
A relatively basic problem, however, still did a long time, the basic timing is spent on the bug on the tat.
MU Lesson Programming topic JS TAB Toggle
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
