小白關(guān)于一個tab選項切換的問題
這是我的HTML代碼
??? <div class="Login_title" id="title">
??????????????? <a href="#" class="active">安全登錄</a>
??????????????? <a href="#">賬號登錄</a>
??? </div>
?? <div id="tab">
???????????????? <!--切換-->
???????????????? <div class="hide">
???????????????????? <div class="form">
??????????????????????? <div class="user_box">
??????????????????????????? <div class="text_search">
??????????????????????????????? <input type="text" value="郵箱/會員/手機賬號" class="w_input">
??????????????????????????? </div>
??????????????????????? </div>
??????????????????????? <div class="pws_box">
??????????????????????????? <div class="password_search">
??????????????????????????????? <input type="password" class="w_input">
??????????????????????????????? <span class="txt">請輸入密碼</span>
??????????????????????????? </div>? ?
??????????????????????? </div>
??????????????????????? <div class="info_box clearfix">
??????????????????????????? <div class="info_left fl">
??????????????????????????????? <input type="checkbox" checked="checked">
??????????????????????????????? <span>記住我</span>
??????????????????????????? </div>
??????????????????????????? <div class="info_right fr">
??????????????????????????????? <a href="#">忘記密碼</a>
??????????????????????????? </div>
??????????????????????? </div>
??????????????????????? <div class="w_btn ">
??????????????????????????? <a href="#">登錄</a>
??????????????????????? </div>
??????????????????? </div>
???????????????????? <div class="text_reg">
???????????????????????? <span class="hr">還沒有微博?<a href="#">立即注冊</a></span>
???????????????????????? <div class="icon">
??????????????????????????? <span>其它登錄方式：</span>
??????????????????????????? <span class="icon_a"><a href="#" class="a_taobao"></a><a href="#" a class="a_qq"></a><a href="#" class="a_uc"></a></span>
???????????????????????? </div>
???????????????????? </div>
???????????????? </div>
???????????????? <div class="block">
???????????????????? <div class="img">
???????????????????????? <div class="img_white">
????????????????????????????? <img src="imgaes/gen.png">
????????????????????????????? <p>請打開微博客戶端“掃一掃”</p>
???????????????????????? </div>
???????????????????????? <p class="hr_p">還沒有微博?<a href="#">立即注冊</a></p>
???????????????????? </div>
???????????????? </div>
???????????? </div>
?? 怎么實現(xiàn)點擊登錄第一個a顯示block? 點擊第二個a顯示hide ？title 可以獲取id然后再找到里面的a?? 下面的tab用js怎么找到里面的hide 和block？小白請賜教，不甚感激
2016-03-24
?<style type="text/css">
????? /*
???? 標簽和文本結(jié)合區(qū)域效果制作：
???? 1.用ul做分類標簽
???? 2.把ul的display定義為block使ul區(qū)域和下面div區(qū)域結(jié)合在一起
???? 3.給ul定義一個下邊框或者給div內(nèi)容區(qū)域定義一個上邊框
???? 4.所有l(wèi)i標簽?zāi)J樣式不設(shè)下邊框，作為激活顯示的li標簽加寬其#fff（白色）
???? 區(qū)域的下邊框，覆蓋。
???? */ ?
??? *{margin:0px;
????? padding:0px;
????? font:12px normal;
????? font-family:微軟雅黑;
????? }????? ?
??? #tabs{width:290px;
????????? height:150px;
????????? padding:5px;
????????? margin:20px;
????????? }
??? #tabs ul{
??????? list-style:none;
??????? display:block;
??????? height:30px;
??????? line-height:30px;
??????? border-bottom:2px solid saddlebrown;
??????? }
??? #tabs ul li{float:left;
??????????????? width:60px;
??????????????? height:28px;
??????????????? line-height:28px;
??????????????? text-align:center;
??????????????? display:inline-block;
??????????????? margin:0px 3px;
??????????????? border:1px solid #aaa;
??????????????? border-bottom:none;
??????????????? cursor:pointer;
??????????????? background:#fff;
??????????????? list-style:none;
??????????????? }
??? #tabs ul li.on{border-top:3px 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;}? ?
??? </style>
??? <script type="text/javascript">??? ?
??? window.onload=function(){
??????? var oTab = document.getElementById("tabs")
??????? var li = document.getElementsByTagName("li");
??????? var div = oTab.getElementsByTagName("div");
??????? //oTabs.get...是為了定義className作用對象為id為tabs下的所有文本div
?????? ?
??????? for(var i=0;i<li.length;i++){//獲取所有i編號的元素
??????????? li[i].index=i;? //定義一個index屬性對li進行編號
??????????? li[i].onclick = function(){//再注冊一個點擊事件，當點擊的時候所有標簽都恢復(fù)最初狀態(tài)
??????????? for(var n=0;n<li.length;n++){//這步是相對于未被點擊部分的樣式
??????????????? li[n].className = "";
??????????????? div[n].className = "hide";
??????????? }
??????????? this.className = "on";//再對點擊事件添加相應(yīng)的屬性
??????????? div[this.index].className = "";//通過之前的index編號綁定的指定div
??????????? }
??????? }
??? }
?? ?
??? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div id="tabs">
??? <ul>
??????? <li class="on">房產(chǎn)</li>
??????? <li>家具</li>
??????? <li>二手房</li>
??? </ul>
??? <div>
??? 275萬購昌平鄰鐵三居 總價20萬買一居<br/>
??? 200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)<br/>
??? 北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平<br/>
??? 京樓盤直降5000 中信府 公園樓王現(xiàn)房<br/>
??? </div>
??? <div class="hide">
???? 40平出租屋大改造 美少女的混搭小窩<br/>
???? 經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生<br/>
???? 新中式的酷色溫情 66平撞色活潑家居<br/>
???? 瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計<br/>
??? </div>
??? <div class="hide">
???? 通州豪華3居260萬 二環(huán)稀缺2居250w甩<br/>
???? 西3環(huán)通透2居290萬 130萬2居限量搶購<br/>
???? 黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!<br/>
???? 獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬<br/>
??? </div>
</div>
參考這個
2016-03-13
是不是這個意思？
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <script> window.onload?=?function() { var?aA?=?document.getElementsByTagName('a')[0]; var?aA2=?document.getElementsByTagName('a')[1]; var?oBlock?=?document.getElementById('block'); var?oHide?=?document.getElementById('hide'); aA.onclick?=?function(){ oBlock.style.display='block'; }; aA2.onclick?=?function(){ oHide.style.display='none'; ?}; }; </script> </head> <body> ????<div?class="Login_title"?id="title"> ????????????????<a?href="javascript:;"?class="active">安全登錄</a> ????????????????<a?href="javascript:;">賬號登錄</a> ????</div> ???<div?id="tab"> ?????????????????<!--切換--> ?????????????????<div?id="hide"?class="hide"?> ????????????????????1111 ?????????????????</div> ?????????????????<div?id="block"class="block"?style="display:none"> ????????????????????2222 ?????????????</div> </body> </html>