怎麼寫一個側邊欄（一）

阿新 • • 發佈：2019-01-06

先寫了一個佔位的側邊欄，還不能伸展，也沒有填充好頁面。

html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link href="sidebar.css" rel="stylesheet" />
        <script src="jquery-2.2.0.min.js"></script>
        <script>
            var show = function 
() {
                // 使用JQuery的makeArray 將 getElementsByClassName返回的類陣列轉化為陣列
                arr = $.makeArray(document.getElementsByClassName('card'));
                // 當前選中的元素
                selected = arr[arguments[0]];
                // 遍歷陣列，設定css 的 display屬性
                arr.forEach(

                    function 
(card) {
                        if(card == selected)
                            $(card).css('display','block');
                        else 
                            $(card).css('display','none');
                    }

                );
            }
        </script>
    </head>

    <body 
>
        主頁
        <div class='div' style="position: absolute; right: 0px;width: 300px;top: 0px;">
            <!--導航-->
            <div id="tabs">
                <span class="tab" onclick="show(0);">One</span>
                <span class="tab" onclick="show(1);">Two</span>
                <span class="tab" onclick="show(2);">Three</span>
            </div>

            <span class="card" style="display: none;">
                <div style="background: red;" class="inner">1</div>
            </span>
            <span class="card" style="display: none;">
                <div style="background: green;" class="inner">2</div>
            </span>
            <span class="card" style="display: none;">
                <div style="background: blue;" class="inner">3</div>
            </span>
        </div>
    </body>

</html>

css

body {
    font-size: 16px;
    margin: 8px;
}

.div {
    border: 1px dashed;
}

#tabs .tab{
    margin: 20px;
    border: 1px dashed;
}

.inner {
    height: 100px;
    width: 100%;
}

樣子

sidebar

怎麼寫一個側邊欄（一）

先寫了一個佔位的側邊欄，還不能伸展，也沒有填充好頁面。 html <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

從零寫一個Java WEB框架（一）

該系列，其實是對《架構探險》這本書的實踐。本人想記錄自己的學習心得所寫下的。從一個簡單的Servlet專案開始起步。對每一層進行優化，然後形成一個輕量級的框架。每一篇，都是針對專案的不足點進行優化的。專案已放上github

基於Adminlte 使用Flask模板功能解決側邊欄（siderbar）不激活問題

如果 ret 操作 ase active fun ask win 文件使用Flask 開發web頁面，在使用Jinja2 模板放入到Adminlte 框架中時，為了避免重復需要建立一個base.html ，遇到側邊欄（Sidebar）不能自動激活問題，如果側邊欄是如

利用JS 事件與 Cnavas繪圖以及 H5 快取寫的一個手勢解鎖（一）

之前參加360前端實習生星計劃時，遇到一個任務，就是利用H5 localStorage實現密碼的存入和獲取。當時還沒有學canvas 繪圖，感覺利用原生JS和CSS實現比較複雜；這次剛好看了JS高程的Canvas繪圖，所以正好可以理論與實踐結合一下，試著做了一

使用JAVA寫的一個簡易通訊程式（一）

好記性不如賴筆頭………… 兩種常見的網路傳輸模型：一、OSI模型分層專業人員一般不說每一層的名稱二是說第幾層，這是等價的，層的位次得記清楚。 7）應用層——為終端使用者提供應用程式服務。 6）表示層——為應用提供資料的表示形式。例如表示層告訴應用層

Ubuntu 資料夾丟失左邊的側邊欄（裝置計算機網路）解決辦法

在折騰Unity 3D 桌面的時候，折騰完了，發現資料夾左邊這一列導航欄沒了。這下，要開啟windows下的分割槽也沒辦法了（或者說很麻煩了）記得在玩3D特效的時候，有個快捷鍵好像是改了資料夾的佈局。於是重新玩了一次。找到了這個快捷鍵。 Shift + F9

沈浸式狀態欄（一）

call visible 界面 isp use ole ams enable oat 我們知道IOS上的應用。狀態欄的顏色總能與應用標題欄顏色保持一致，用戶體驗非常不錯。那安卓能否夠呢？若是在安卓4.4之前，答案是否定的，但在4.4之後，谷歌同意開發人員自己

如何寫出好代碼（一）——抽取模塊別隨意

記得變化以及實現變量 font nbsp 展望叠代進入正題前前端開發是最讓人生畏的，因為你要關心的太多了，調用後臺接口和第三方等的異步操作，核心功能的控制，界面的樣式設計，與用戶交互及提示……稍不留神，代碼就成一團亂麻了。 “哈哈，你說的這些，我早已駕輕就熟

從零開始造一個Markdown編輯器（一）

實時需要自己實現自己背景學習正則表達式 tex ID img 背景最近學習正則表達式，於是要挑一個練手項目，恰好對markdown編輯器十分感興趣，於是就進行了一些常識。做了一個簡單的markdown解析器和編輯器。網頁端的地址(不支持文件的操作)： http

MySQL 之 MHA + ProxySQL + keepalived 實現讀寫分離，高可用（一）

don replica ifconfig soft 似的恢復 select 8.0 ext 準備服務器： docker network create --subnet=192.168.0.0/16 staticnetdocker run -d --privileg

從零寫一個Java WEB框架（七）Controller層轉換器

從零寫一個Java WEB框架（六）Controller層優化

從零寫一個Java WEB框架（五）IOC建立

從零寫一個Java WEB框架（四）框架的演進

從零寫一個Java WEB框架（三）Dao層優化

從零寫一個Java WEB框架（二）Server層優化

該系列，其實是對《架構探險》這本書的實踐。本人想記錄自己的學習心得所寫下的。從一個簡單的Servlet專案開始起步。對每一層進行優化，然後形成一個輕量級的框架。每一篇，都是針對專案的不足點進行優化的。專案已放上github 上一篇地

Java 邊學邊做（一）過一下基礎

Java是面向物件的語言那麼首先就要了解一下什麼是面向過程和麵向物件。面向過程：關鍵在於“怎麼做”。例如你想成為大俠，首先你需要斷臂或者跌落懸崖，然後遇見雕兄或者白猿，然後再“重劍無鋒”或者“九陽真經”等等。這裡注重的是步驟，是一個邏輯上的過程，典型就是C語言中的函式呼叫，堆砌成一個程式。面向物件：

如何建立一個APPS後臺服務（一）

網際網路的發展，各大市場上出現了很多的APPS應用，微信公眾平臺也出現了很多公眾號，最近火的應該是小程式吧！上大學時老師說程式等於資料結構加演算法，那這些APPS應用、公眾號是怎麼向用戶提供服務，作為一名程式猿，我們應該怎麼搭建一個APPS應用。下面由我來為大家一一介紹. APPS應用通用

【以太坊開發】利用Oraclize開發一個投注合約（一）：原理介紹

智慧合約的作用很多，但是很多資料還是要基於網際網路，那麼如何在合約中獲取網際網路中的資料？Oraclize就是為了這個目的而誕生的。本篇介紹如何利用Oraclize開發一個投注智慧合約，開始coding之前，這一節講述一下理論。工作原理：智慧合約通過對Oraclize釋出一個合約之間的呼叫請求來獲

【以太坊開發】利用Oraclize開發一個投註合約（一）：原理介紹

tween 協議簡單方法 type callback 使用抓取獲取 num 智能合約的作用很多，但是很多數據還是要基於互聯網，那麽如何在合約中獲取互聯網中的數據？Oraclize就是為了這個目的而誕生的。本篇介紹如何利用Oraclize開發一個投註智能合約，開始co

怎麼寫一個側邊欄（一）

相關推薦