懇求大家?guī)臀铱纯礊槭裁催@個無法生效(*人*)
主要問題在于js代碼無法生效。添加了onclick也沒有表現(xiàn)出按鈕的樣子。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ? ?*{padding:0px;margin:10px 0px;}
? ? ? ?span {margin-top:10px;padding:5px 20px;border:1px solid;border-bottom:2px;background-color:gray;line-height:18px;} ?/* 三個標題欄的默認樣式 */ ? ??
? ? ? ?#neirong {width:350px;height:125px;border:1px solid;border-top:2px solid red;margin-top:4px;}
? ? ? ?.xuan {margin-top:10px;padding:5px 20px;border:1px solid;border-top:2px solid red;border-bottom:2px;background-color:#fff;} /* 標題欄被選中后的樣式 */
? ? ? ?.show {list-style:none;padding-left:20px;} /* 文本內(nèi)容被選中的樣式 */
? ? ? ?.hide {display:none;}
? ? </style>
? ? <script type="text/javascript">
? ? window.onload = function(){ ? ??
? ? // JS實現(xiàn)選項卡切換，內(nèi)容文本全默認隱藏，通過點擊選項卡顯示對應文本。
? ? var biaoti=document.getElementsByTagName("span");
? ? var wenben=document.getElementsByTagName("ul")
? ? for(var i=0;i<biaoti.length;i++){
? ? ? ? ?biaoti[i].index = i; ?
? ? ? ? ?biaoti[i].onClick = function(){
? ? ? ? ? ? ?for(var n=0;n<biaoti.length;n++){
? ? ? ? ? ? ? ? biaoti[n].className = "";
? ? ? ? ? ? ? ? wenben[n].className = "hide";
? ? ? ? ? ? ? ? this.className = "xuan";
? ? ? ? ? ? ? ? wenben[this.index].className = "show";
? ? ? ? ? ? ?}
? ? ? ? ?}
? ? ?}
? ? ?}
? ? </script>
</head>
<body>
<span id="ka1">房產(chǎn)</span>
<span id="ka2">家居</span>
<span id="ka3">二手房</span>
<div id="neirong">
? ? <ul> ?//刪掉了一些li避免占用篇幅
? ? ? ? <li>275萬購昌平鄰鐵三居 總價20萬買一居</li>
? ? </ul>
? ? <ul>
? ? ? ? <li>40平出租屋大改造 美少女的混搭小窩</li>
? ? </ul>
? ? <ul>
? ? ? ? <li>通州豪華3居260萬 二環(huán)稀缺2居250w甩</li>
? ? </ul>
</div>
</body>
</html>
2016-12-05
困擾多天的問題終于解決了??！
原來我把onclick寫成了onClick。
其實我最初是想寫onmouseover事件的。那么問題來了。
如何讓選項卡的border-bottom遮擋住下面框的border-top呢