<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/?
?????#main{
????????text-align:center;
?????????}
???????ul{
???????????list-style:none;
???????????margin-right:4px;
???????????margin-bottom:4px;
???????????
???????????}
???????li{
???????????display:inline;
??????????
???????????padding:5px;
???????????margin-right:15px;
???????????font-weight:500;
???????????border:1px?solid?#999;
???????????cursor:pointer;
???????????/*border:2px?solid?#A9734E;*/
???????????/*border-bottom:1px?solid?#999;*/
???????}
???????.real{
???????????
???????????border:2px?solid?#A9734E;
??????????
???????}
???????.home{
???????????
???????????border:2px?solid?#A9734E;
???????????display:none;
???????}
???????.sed{
????????????
???????????border:2px?solid?#A9734E;
???????????display:none;
???????}
????</style>
????<script?type="text/javascript">
?????????
?window.onload=function(){
?????
?//?JS實(shí)現(xiàn)選項(xiàng)卡切換
var?tab=document.getElementsByTagName("li");
var?tabcon=document.getElementsByTagName("p");
for(i=0;i<tab.length;i++){
?tab[i].index=i;
?????
????tab[i].onclick=function(){
?????????
??????????for(j=0;j<tab.length;j++){
????????tabcon[j].style.display="none";
????
??????????}
??????alert()
????for(j=0;j<tab.length;j++){
???????tab[j].style.border="1px?solid?#999";
?????????
??????????}
??????
????this.style.border="2px?solid?#A9734E";
????tabcon[this.index].style.display="block";
????
?????????alert()
????}
}
?}
????</script>
?
</head>
<body>
<!--?HTML頁面布局?-->
????<div?id="main">
????
????????<ul>
????????????<li?id="t1">房產(chǎn)</li>
????????????<li?id="t2">家居</li>
????????????<li?id="t3">二手房</li>
????????</ul>
????????
????????<div>
????????????<p>??275萬購昌平鄰鐵三居?總價(jià)20萬買一居<br/>
????200萬內(nèi)購五環(huán)三居?140萬安家東三環(huán)<br/>
????北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平<br>
????京樓盤直降5000?中信府?公園樓王現(xiàn)房</p>
????????</div>
????????
????????<div>
????????????<p>?40平出租屋大改造?美少女的混搭小窩<br>
?????經(jīng)典清新簡歐愛家?90平老房煥發(fā)新生<br>
?????新中式的酷色溫情?66平撞色活潑家居<br>
?????瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)</p>
????????</div>
????????
????????<div>
????????????<p>
????????????通州豪華3居260萬?二環(huán)稀缺2居250w甩<br>
?????西3環(huán)通透2居290萬?130萬2居限量搶購<br>
?????黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋!<br>
?????獨(dú)家別墅280萬?蘇州橋2居優(yōu)惠價(jià)248萬
????????????</p>
????????</div>
????????
????</div>
?
</body>
</html>
2015-07-31
var main=document.getElementById("main");
var tabcon=main.getElementsByTagName("div");
不能獲取p元素,應(yīng)該獲取div元素,因?yàn)榍斑卌ss設(shè)置的是div的樣式。
棒棒的,
哈哈