2. 程式人生 > >編程挑戰JavaScript進階篇（慕課網題目）

編程挑戰JavaScript進階篇（慕課網題目）

阿新 • • 發佈：2017-09-11
align mar setattr 家居 back 技術分享 meta lock cor

編程挑戰

現在利用之前我們學過的JavaScript知識，實現選項卡切換的效果。

效果圖:

技術分享

文字素材:

房產：

275萬購昌平鄰鐵三居 總價20萬買一居
200萬內購五環三居 140萬安家東三環
北京首現零首付樓盤 53萬購東5環50平
京樓盤直降5000 中信府 公園樓王現房

家居:

40平出租屋大改造 美少女的混搭小窩
經典清新簡歐愛家 90平老房煥發新生
新中式的酷色溫情 66平撞色活潑家居
瓷磚就像選好老婆 衛生間煙道的設計

二手房：

通州豪華3居260萬 二環稀缺2居250w甩
西3環通透2居290萬 130萬2居限量搶購
黃城根小學學區僅260萬 121平70萬拋!
獨家別墅280萬 蘇州橋2居優惠價248萬

我的解答

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS綜合練習-選項卡</title>
    <style type="text/css">
        /* CSS樣式制作 */
        body, ul, li, a, ol{
            margin: 0;
            padding: 0;
        }
        a{
            text
 
-decoration: none;
            color: #000;
        }
        li{
            list-style: none;
        }


        .header{
            overflow: hidden;
            width: 350px;
        }
        .header li{
            float: left;
            margin-left: 10px;
            text-align: center;
            line
 
-height: 30px;
            width: 98px;
            height: 30px;
            border: 1px solid #888;
            border-bottom: none;
        }
        .header .active{
            border-top: 2px solid #8B4513;
            background-color: #fff;
        }
        .header li a{
            display: block;
            height: 30px;
            width: 98px;
        }
        #content ul{
            border: 1px solid #7396B8;
            border-top: 2px solid #8B4513;
            padding: 10px;
            width: 380px;
            height: 110px;
            position: relative;
            top: -2px;
            z-index: -1;
        }
        .notshow{
            display: none;
        }
    </style>
    <script type="text/javascript">
        // JS實現選項卡切換
        window.onload=function () {
            var header = document.getElementById("header");
            var lilist = header.getElementsByTagName("li");
            for(var i=0;i<lilist.length;i++){
                lilist[i].index = i;
                lilist[i].onclick = function () {
                    var content = document.getElementById("content");
                    var ulist = content.getElementsByTagName("ul");
                    for(var k=0;k<lilist.length;k++){
                        lilist[k].setAttribute("class","");
                        ulist[k].setAttribute("class","notshow");
                    }
                    this.setAttribute("class","active");
                    ulist[this.index].setAttribute("class","");
                }
            }
        }

    </script>

</head>
<body>
<!-- HTML頁面布局 -->
<ul id="header" class="header">
    <li class="active"><a href="#">房產</a></li>
    <li><a href="#">家居</a></li>
    <li><a href="#">二手房</a></li>
</ul>
<div id="content">
    <ul>
        <li>275萬購昌平鄰鐵三居 總價20萬買一居</li>
        <li>200萬內購五環三居 140萬安家東三環</li>
        <li>北京首現零首付樓盤 53萬購東5環50平</li>
        <li>京樓盤直降5000 中信府 公園樓王現房</li>
    </ul>
    <ul class="notshow">
        <li>40平出租屋大改造 美少女的混搭小窩</li>
        <li>經典清新簡歐愛家 90平老房煥發新生</li>
        <li>新中式的酷色溫情 66平撞色活潑家居</li>
        <li>瓷磚就像選好老婆 衛生間煙道的設計</li>
    </ul>
    <ul class="notshow">
        <li>通州豪華3居260萬 二環稀缺2居250w甩</li>
        <li>西3環通透2居290萬 130萬2居限量搶購</li>
        <li>黃城根小學學區僅260萬 121平70萬拋!</li>
        <li>獨家別墅280萬 蘇州橋2居優惠價248萬</li>
    </ul>
</div>
</body>
</html>

編程挑戰JavaScript進階篇（慕課網題目）

相關推薦

編程挑戰JavaScript進階篇（慕課網題目）

align mar setattr 家居 back 技術分享 meta lock cor 編程挑戰 現在利用之前我們學過的JavaScript知識，實現選項卡切換的效果。 效果圖: 文字素材: 房產： 275萬購昌平鄰鐵三居 總價20萬買一居 200萬內

【總結整理】javascript基礎入門學習（慕課網學習）

節點 confirm pro remove prompt 例如 ref 存儲 基礎入門 https://www.imooc.com/learn/36 註意: javascript作為一種腳本語言可以放在html頁面中任何位置，但是瀏覽器解釋html時是按先後順序的，所以前面

事件響應練習（慕課網題目）

通過 取值 font data 按鈕 turn del att get 編程練習 使用JS完成一個簡單的計算器功能。實現2個輸入框中輸入整數後，點擊第三個輸入框能給出2個整數的加減乘除。 提示：獲取元素的值設置和獲取方法為：例：賦值：document.getElemen

JS內置對象練習（慕課網題目）

星期四 rest html 內置 document har write func index 效果圖: XXXX年XX月X日 星期X--班級總分為:81 格式要求： 1、顯示打印的日期。 格式為類似“XXXX年XX月XX日 星期X” 的當前的時間。 2、計算出該班級的平均分

抽獎系統（慕課網題目）

優化 asc window cursor 按鍵 center idt ole type 要求實現功能： 1.點擊左側按鍵，開始抽獎，點擊右側按鍵，停止抽獎； 2.敲擊回車鍵，開始抽獎，再次敲擊回車鍵，停止抽獎； 3.開始抽獎後，左側按鈕變色； html： <!DOC

SQL Server調優系列進階篇（如何索引調優）

.cn 技術 spa 磁盤 clear 高頻 思路 ltp 覆蓋範圍 前言 上一篇我們分析了數據庫中的統計信息的作用，我們已經了解了數據庫如何通過統計信息來掌控數據庫中各個表的內容分布。不清楚的童鞋可以點擊參考。 作為調優系列的文章，數據庫的索引肯定

【備戰春招/秋招系列】美團Java面經總結進階篇 （附詳解答案）

一 訊息佇列MQ的套路 1.1 介紹一下訊息佇列MQ的應用場景/使用訊息佇列的好處 ①.通過非同步處理提高系統性能 ②.降低系統耦合性 1.2 那麼使用訊息佇列會帶來什麼問題？考慮過這個問題嗎？ 1.3 介紹

SQL Server調優系列進階篇（如何維護資料庫索引）

前言 上一篇我們研究瞭如何利用索引在資料庫裡面調優，簡要的介紹了索引的原理，更重要的分析瞭如何選擇索引以及索引的利弊項，有興趣的可以點選檢視。 本篇延續上一篇的內容，繼續分析索引這塊，側重索引項的日常維護以及一些注意事項等。 閒言少敘，進入本篇的主題。 技術準備 資料庫版本為SQL Server20

SQL Server調優系列進階篇（深入剖析統計資訊）

前言 經過前幾篇的分析，其實大體已經初窺到SQL Server統計資訊的重要性了，所以本篇就要祭出這個神器了。 該篇內容會很長，坐好板凳，瓜子零食之類... 不廢話，進正題 技術準備 資料庫版本為SQL Server2008R2，利用微軟的以前的案例庫（Northwind）進行分析，部分內容也會應用

Linux----軟件安裝管理（慕課網筆記）

樹形 擴展 方法 程序 style 慕課網 命令管理 平臺 很難 一、軟件包安裝簡介 軟件包分類 源碼包 腳本安裝包 二進制包（rpm包，系統默認包） 源碼包 源碼包優點 開源，如果有足夠能力，可以自行修改源代碼 可以自由選擇所需的功能 軟件是編譯安裝，所以

Linux達人養成計劃（慕課網筆記）

一、Linux簡介 1、Linux分為核心版和發行版 2、Window是與Linux的區別 （1）Linux嚴格區分大小寫 （2）Linux中所有內容以檔案形式儲存，包括硬體 （3）Linux沒有副檔名概念 即Linux不靠副檔名區分檔案型別（靠許可權區分），但會有一些約定尋常的副

噠噠租車系統（慕課網學習）

         設計一個租車系統，車有載貨和載人，也有既載貨又載人的車，模擬租車系統，實現一點小功能！ 綜合運用所學知識，完善系統（異常處理，介面使用，封裝繼承等等~） 異常處理還是有些缺陷，對選車過程中輸錯序號還沒有很好的處理，等掌握的知識多了再來解決。 程式碼如下

Java面向對象進階篇（包裝類，不可變類）

public 不存在 內存空間 test 都是 style system 覆蓋 位置 一. Java 8的包裝類 Java中的8種基本數據類型不支持面向對象的變成機制，也不具備對象的特性:沒有成員變量，方法可以調用。為此，Java為這8 種基本數據類型分別提供

shell腳本進階篇（上）

col oss family 指定 -o for循環 用戶輸入 span 創建用戶 shell腳本是我們學習運維的難點，本篇內容簡單舉例shell腳本的進階上篇，有任何技術上的指導，知識上的不足都歡迎指出點明。 流程控制過程式編程語言： 順序執行 選擇執行 循環執行條

java編程高級進階

nod tle blog orm https pos 編程 courier namenode Java內存模型 對hadoop namenode -format執行過程的探究 java編程高級進階

React學習筆記之react進階篇（1）

ava 不能 success 字符 style 使用 -s 布爾 一次 1.組件的state（狀態） 1.選擇合適的state 　　state所代表的一個組件UI呈現的完整狀態集又可以分成兩類數據：用作渲染組件時使用到的數據的來源以及用作組件UI展現形式的判斷依據。 示

React學習筆記之react進階篇（2）

-s state ops category strong tro 服務 ive 周期 2.組件與服務器通信 　　組件的生命周期分為三個階段：掛載階段->更新階段->卸載階段，本文主要集中講述掛載和更新階段組件如何和服務器進行通信。 1.組件掛載階段通信 　

Python基礎（8）：python中的特性進階篇（迭代，列表生成式，生成器，迭代器）

python中還包括一些高階特性，以下簡單介紹。 迭代 定義：用for迴圈來遍歷物件的過程，叫做迭代。 作用物件：可迭代物件 如何判斷是否為可迭代物件：isinstance(xxx,Iterable)，Iterable型別來源於collections模組。 應用場景： 1

Java多執行緒之進階篇（二）

概述 1.基本原子類 1.1 AtomicBoolean 1.2 AtomicInteger和AtomicLong 2.引用原子類

Java多執行緒之進階篇（一）

一、執行緒池 1.1 執行緒池的建立 1.1.1 ThreadPoolExecutor 1.1.2 執行緒池的分類