python學習之網站的編寫（HTML，CSS，JS）（二十三）----------示例，點選不同的選單在相同的位置顯示不同的內容（索引的方式）

阿新 • • 發佈：2018-12-15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>

    <div style="width: 700px;margin:0 auto">

        <div class="menu">
            <div  class="menu-item active" >選單一</div>
            <div  class="menu-item" >選單二</div>
            <div  class="menu-item" >選單三</div>
        </div>
        <div class="content">
            <div >內容一</div>
            <div class="hide" >內容二</div>
            <div class="hide">內容三</div>

        </div>

    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');

        });
    </script>
</body>
</html>

python學習之網站的編寫（HTML，CSS，JS）（十七）----------示例，構造一個網頁的框架，上部標題，登入，logo，左側選單，右側內容，原始碼

結果：顏色為了明顯，所以較為難看，可以根據自己的需要進行更改原始碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title

python學習之網站的編寫（HTML，CSS，JS）（十六）----------示例，構造一個左側管理選單的功能，點選主選單才顯示下面的內容

結果：程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逆水行舟不進則退</title>

python學習之網站的編寫（HTML，CSS，JS）（十五）----------示例，彈出一個背景為半黑色，前面是白框的彈窗功能（已經編好的框架）

效果圖，程式碼直接可應用，按自己的需要在其中加入想要的內容：程式碼及講解： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

python學習之網站的編寫（HTML，CSS，JS）（十四）----------CSS的display行內標籤和塊級標籤的轉換，控制標籤是否顯示

行內標籤：有多大就佔多大，無法設定高度，寬度和邊距。塊級標籤：佔一行，可以設定高度，寬度和邊距。塊級標籤轉為行內標籤：display:inline 行內標籤轉為塊級標籤：display:block 還有一個特殊的轉換，既包含塊級標籤的屬性，又具有行內標籤的屬性，自己有多少佔多少，

python學習之網站的編寫（HTML，CSS，JS）（十三）----------CSS字型和對齊方式的設定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逆水行舟不進則退</title> </head> <b

python學習之網站的編寫（HTML，CSS，JS）（十二）----------CSS邊框的編寫

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逆水行舟不進則退</title> </head> <b

python學習之網站的編寫（HTML，CSS，JS）（十一）----------如何利用其它html檔案中的CSS（也就是可以將共同的地方提取出來，放大一個檔案中，利於使用）

首先說一下它的具體用處，我們已經知道，當我們寫一個html檔案的時候，不同的標籤想用相同的版式的時候，我們可以將它提取出來，然後再用一些選擇器進行應用，比如class選擇器。但是，但我們編寫多個html檔案中的時候，多個檔案都想用一些相同的版式該怎麼辦呢？那麼就引入了這種連線的方式，首先寫一個

python學習之網站的編寫（HTML，CSS，JS）（十）----------CSS中用的最多的class選擇器，批量的為一些標籤設定相同的版式

選擇器有很多種，有id選擇器，div選擇器，層級選擇器，組合選擇器等等，然而，用的最多的就是class選擇器，它的作用是為下面所有符合class規則的標籤設定上相同的版式。步驟： 1.在頭部編寫<style>標籤，點+class選擇器的名稱（也就是下面需要選擇的class），然

python學習之網站的編寫（HTML，CSS，JS）（九）----------table標籤，表格的實現

table標籤，裡邊的tr表示行，td表示列。程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逆水行

python學習之網站的編寫（HTML，CSS，JS）（八）----------label標籤，點選label標籤的文字將編輯的游標移過來

如果不加label的話，只設置值的話，點選文字是不能將編輯的游標移過來的，必須將id連線上之後，才可以實現，點選文字就可以將編輯的游標移過來。實現結果：程式碼： <!DOCTYPE html> <html lang="en"> <hea

python學習之網站的編寫（HTML，CSS，JS）（七）----------以列表條目的方式顯示

話不多說，直接上圖實現的程式碼及解釋： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逆水行舟不進則退</t

python學習之網站的編寫（HTML，CSS，JS）（一）---------------------------------------初識（初學者需瞭解）

首先推薦一款很好的python編譯軟體pycharm，但凡接觸過python的人對它一定不是很陌生，在這裡我們就可以編輯一些瀏覽器認識的html檔案，創造出我們喜歡的網站頁面，在pycharm中建立一個html檔案是下面這樣的，然後我們會對其一句一句的解釋。 <!DO

python學習之網站的編寫（HTML，CSS，JS）（三）----------input系列的標籤詳解及示例程式碼（可上傳到伺服器form標籤）

文章編排，我們首先來講一下input系列的各種內容，然後用一個示例程式碼來清晰的理解其中特定的含義 input系列： 1.輸入文字內容： <input type="text" name="user"/>起個名字易於在伺服器端進行處理 2.輸入密碼內容:

python學習之網站的編寫（HTML，CSS，JS）（五）----------a標籤，用於實現網頁的跳轉和頁面具體位置的跳轉

a標籤既可以實現頁面的跳轉也可以實現具體位置的跳轉，見如下程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit

python學習之網站的編寫（HTML，CSS，JS）（二十一）----------事件（例如點選事件等）及繫結事件的幾種方式

事件：什麼叫做事件呢，就是我們在頁面中的一些滑鼠和鍵盤操作，比如onclick就是點選事件，然後我們將介紹幾種繫結事件的方式。 1.在標籤中繫結 <div onclick="fuc()"></div> <script> fun

python學習之網站的編寫（HTML，CSS，JS）（二十三）----------示例，點選不同的選單在相同的位置顯示不同的內容（索引的方式）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <

python學習之網站的編寫（HTML，CSS，JS）（二十四）----------示例，點贊，點讚的同時旁邊出現一個逐漸變大的+1殘影並很快消失

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <st

python學習之網站的編寫（HTML，CSS，JS）（二十二）----------示例，點選不同的選單在相同的位置顯示不同的內容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <

selenium點選連結進入子頁面抓取內容（新聞抓取案例一）

找了一個新聞網站練習爬蟲抓取，目標：逐一點選目錄標題，進入詳細新聞頁面，抓取子頁面的標題和正文內容並打印出來，返回目錄標題頁，點選下一篇文章。注：沒有新開視窗，是在原視窗實現跳轉。新開視窗進行抓取看下一篇文章。試了很多種方法都抓取不到class=rightContent下

python學習之路（基礎篇）——列表，字典，集合

cef mes 所有聽說基本變量 .so tdi 作用一、列表，元組操作定義列表 names = [‘Alex‘,"Tenglan",‘Eric‘] 查看 >>> names[0] ‘Alex‘ >>> names[2]

python學習之網站的編寫（HTML，CSS，JS）（二十三）----------示例，點選不同的選單在相同的位置顯示不同的內容（索引的方式）

相關推薦