                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進階篇

最通俗易懂的，歡迎各位吐槽

<!DOCTYPE html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <title>實踐題 - 選項卡</title>

? ? <style type="text/css">

? ? ?/* CSS樣式制作 */?

? ? *{

? ? ? ? font:12px/1.5em 微軟雅黑,sans-serif;

? ? ? ? padding:0;

? ? ? ? margin:0;

? ? }

? ? #tabs{

? ? ? ? width:300px;

? ? ? ? height:170px;

? ? ? ? padding:5px;

? ? ? ? margin:18px;

? ? }

? ? #table{

? ? ? ? height:30px;

? ? ? ? display:block;

? ? ? ? list-style:none;//清除圓點,沒有好像也可以；? ? }

? ? #table li{

? ? ? ? cursor:pointer;//修改指針為手指形狀；

? ? ? ? float:left;

? ? ? ? text-align:center;

? ? ? ? line-height:28px;

? ? ? ? width:60px;

? ? ? ? height:28px;

? ? ? ? margin:0,0,0,3px;

? ? ? ? display:inline-block;

? ? ? ? background:#fff;

? ? }

? ? .li1{

? ? ? ? border:1px solid #ccc;

? ? ? ? border-top:2px solid red;

? ? ? ? border-bottom:2px solid #fff;

? ? }

? ? .li2{

? ? ? ? border:1px solid #ccc;

? ? ? ? border-bottom:0px;? ? }

? ? #tabs div{

? ? ? ? border:1px solid blue;

? ? ? ? border-top:2px solid red;

? ? ? ? background:#fff;

? ? ? ? height:120px;

? ? ? ? padding:10px;

? ? ? ? line-height:25px;

? ? }

? ? .box1{

? ? ? ? display:block;

? ? }

? ? .box2{

? ? ? ? display:none;

? ? }

? ? </style>

? ? <script type="text/javascript">

? ? ?function aaa(){

? ? ? var a=document.getElementById("a");

? ? ? var b=document.getElementById("b");

? ? ? var c=document.getElementById("c");

? ? ? var e=document.getElementById("e");

? ? ? var f=document.getElementById("f");

? ? ? var g=document.getElementById("g");

? ? ? a.className="box1";

? ? ? b.className="box2";

? ? ? c.className="box2";

? ? ? e.className="li1";

? ? ? f.className="li2";

? ? ? g.className="li2";

? }

? function abb(){

? ? ? ?var a=document.getElementById("a");

? ? ? var b=document.getElementById("b");

? ? ? var c=document.getElementById("c");

? ? ? var e=document.getElementById("e");

? ? ? var f=document.getElementById("f");

? ? ? var g=document.getElementById("g");

? ? ? a.className="box2";

? ? ? b.className="box1";

? ? ? c.className="box2";

? ? ? e.className="li2";

? ? ? f.className="li1";

? ? ? g.className="li2";

? }

? function acc(){

? ? ? var a=document.getElementById("a");

? ? ? var b=document.getElementById("b");

? ? ? var c=document.getElementById("c");

? ? ? var e=document.getElementById("e");

? ? ? var f=document.getElementById("f");

? ? ? var g=document.getElementById("g");

? ? ? e.className="li2";

? ? ? f.className="li2";

? ? ? g.className="li1";

? ? ? a.className="box2";

? ? ? b.className="box2";

? ? ? c.className="box1";

? }

??

? ? </script>

?

</head>

<body>

</ul>? <div class="box1" id="a">

? ? 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="box2" id="b">

? ? 40平出租屋大改造美少女的混搭小窩<br>

? ? 經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生<br>

? ? 新中式的酷色溫情 66平撞色活潑家居<br>

? ? 瓷磚就像選好老婆衛(wèi)生間煙道的設(shè)計<br>

? </div>

? <div class="box2" id="c">

? ? 通州豪華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>

</body>

</html>

雖然繁瑣，可以實現(xiàn)題目

慕先生3265212

2019-10-13

源自：JavaScript進階篇 10-1

關(guān)注問題我要回答

942

操作

收起

4 回答

weixin_慕函數(shù)0204101
2020-03-24

哈哈，我最開始寫的也是和你一模一樣的邏輯，? ?通俗易懂，簡單粗暴??

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

kaluroro
2020-02-20

稍稍改進了一下：

?

<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實踐題 - 選項卡</title>
??? <style type="text/css">
???? /* CSS樣式制作 */
??? *{
??????? font:12px/1.5em 微軟雅黑,sans-serif;
??????? padding:0;
??????? margin:0;
??? }

??? #tabs{
??????? width:300px;
??????? height:170px;
??????? padding:5px;
??????? margin:18px;
??? }

??? #table{
??????? height:30px;
??????? display:block;
??????? list-style:none;//清除圓點,沒有好像也可以；???
??? }

??? #table li{
??????? cursor:pointer;//修改指針為手指形狀；
??????? float:left;
??????? text-align:center;
??????? line-height:28px;
??????? width:60px;
??????? height:29px;
??????? margin:0,0,0,3px;
??????? display:inline-block;
??????? background:#fff;
??? }

??? .li1{
??????? border:1px solid #ccc;
??????? border-top:2px solid red;
??????? border-bottom:2px solid #fff;
??? }

??? .li2{
??????? border:1px solid #ccc;
??????? border-bottom:0px;
??? }

??? #tabs div{
??????? border:1px solid blue;
??????? border-top:2px solid red;
??????? background:#fff;
??????? height:120px;
??????? padding:10px;
??????? line-height:25px;
??? }

??? .box1{
??????? display:block;
??? }

??? .box2{
??????? display:none;
??? }

??? </style>
???
???
??? <script type="text/javascript">
???
??? function aaa(){
??????? var a=document.getElementById("a");
??????? var b=document.getElementById("b");
??????? var c=document.getElementById("c");
??????? var e=document.getElementById("e");
??????? var f=document.getElementById("f");
??????? var g=document.getElementById("g");

??????? a.className="box1";
??????? b.className="box2";
??????? c.className="box2";
??????? e.className="li1";
??????? f.className="li2";
??????? g.className="li2";
??? }

??? function abb(){
??????? var a=document.getElementById("a");
??????? var b=document.getElementById("b");
??????? var c=document.getElementById("c");
??????? var e=document.getElementById("e");
??????? var f=document.getElementById("f");
??????? var g=document.getElementById("g");
?????
??????? a.className="box2";
??????? b.className="box1";
??????? c.className="box2";
??????? e.className="li2";
??????? f.className="li1";
??????? g.className="li2";
??? }

??? function acc(){

??????? var a=document.getElementById("a");
??????? var b=document.getElementById("b");
??????? var c=document.getElementById("c");
??????? var e=document.getElementById("e");
??????? var f=document.getElementById("f");
??????? var g=document.getElementById("g");

??????? e.className="li2";
??????? f.className="li2";
??????? g.className="li1";
??????? a.className="box2";
??????? b.className="box2";
??????? c.className="box1";
??? }
??? </script>
???
</head>

<body>

<div id="tabs">
??? <ul id="table">
??????? <li class="li1" id="e" onclick="aaa()">房產(chǎn)</li>
??????? <li class="li2" id="f" onclick="abb()">家居</li>
??????? <li class="li2" id="g" onclick="acc()" >二手房</li>
??? </ul>?
???
??? <div class="box1" id="a">

??????? <a href="javascript:void(0)">275萬購昌平鄰鐵三居總價20萬買一居</a><br>
??????? <a href="javascript:void(0)">200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)</a><br>
??????? <a href="javascript:void(0)">北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平</a><br>
??????? <a href="javascript:void(0)">京樓盤直降5000 中信府公園樓王現(xiàn)房</a><br>

??? </div>

??? <div class="box2" id="b">
???
??????? <a href="javascript:void(0)">40平出租屋大改造美少女的混搭小窩</a><br>
??????? <a href="javascript:void(0)">經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生</a><br>
??????? <a href="javascript:void(0)">新中式的酷色溫情 66平撞色活潑家居</a><br>
??????? <a href="javascript:void(0)">瓷磚就像選好老婆衛(wèi)生間煙道的設(shè)計</a><br>
???
??? </div>

??? <div class="box2" id="c">
???
??????? <a href="javascript:void(0)">通州豪華3居260萬二環(huán)稀缺2居250w甩</a><br>
??????? <a href="javascript:void(0)">西3環(huán)通透2居290萬 130萬2居限量搶購</a><br>
??????? <a href="javascript:void(0)">黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!</a><br>
??????? <a href="javascript:void(0)">獨家別墅280萬蘇州橋2居優(yōu)惠價248萬</a><br>
???
??? </div>

</div>

</body>

</html>