導航欄切換—雲南旅遊相冊

時間 2019-11-10

原文原文鏈接

經過使用jQuery庫來實現導航欄切換；分析以下：css

一、首先創建一個就緒函數ready函數，把全部的jQuery內容都寫到這個函數中。
二、選中按鈕元素並綁定單擊事件
三、選中img圖片，經過eq（）方法找到對應的圖片元素
四、其中eq（）的參數經過$(this).index（）方式獲取當前的索引。
五、經過css（）方法對圖片的透明度設置爲1來顯示。
六、再經過siblings（）找到當前選中按鈕的兄弟元素，並經過css（）設置透明度爲0。

效果圖以下：

具體代碼以下：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>雲南旅遊相冊</title>
    <style>
        /* 清除樣式 */
        *{
            margin: 0;
            padding: 0;   
            border: none;       
        }
        html,
        body{
            background-color: #91b0c8;
            /* 高度設置爲100%自設置 */
            height: 100%;
        }

        /* 按鈕 */
        span{
            display: block;
            margin: 20px auto 30px;
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 50%;
        }

        /* 導航條 */
        nav{
            position: relative;
            display: flex;
            width: 80vw;
            margin: 0 auto 25px;
            justify-content: space-between;
        }


        /* 各導航之間的導航連接線使用僞類選擇器來實現，可是僞類是行級元素須要轉塊元素  content屬性與 :before 及 :after 僞元素配合使用，來插入生成內容*/
        nav:before{
            position: absolute;
            top: 20px;
            width: 100%;
            height: 15px;
            background-color: white;
            display: block;
            content: '';
        }

        nav > a{
            position: relative;
            color: #4aa0d6; font-size: 17px; border: 2px solid #5395b4;
            padding: 10px;
            background-color: white;
            text-decoration: none;
        }

        /* 圖片 */
        div{
            position: relative;
            width: 80vw;
            height: 78vh;
            background-color: white;
            margin:  0 auto 20px;
        }
        div > img{
            width: 98%;
            height:96%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
           margin: auto;
        }

    </style>
</head>
<body>
    <!-- 按鈕 -->
    <span></span>
    <!-- 導航條 -->
    <nav>
        <a href="#">瀘沽湖</a>
        <a href="#">麗江古城</a>
        <a href="#">茶馬古道</a>
        <a href="#">就這家●雲逸客棧</a>
        <a href="#">西雙版納</a>
        <a href="#">雲南紅酒莊</a>
        <a href="#">轎子雪山</a>
        <a href="#">普者黑</a>
        <a href="#">海埂大壩</a>
        <a href="#">玉龍灣</a>
        <a href="#">昆明郊野公園</a>
        <a href="#">歐洲風琴</a>
    </nav>
    <!-- 圖片區 -->
    <div>
        <img src="images/1.jpg" alt="瀘沽湖" title="瀘沽湖">
        <img src="images/2.jpg" alt="麗江古城" title="麗江古城">
        <img src="images/3.jpg" alt="茶馬古道"  title="茶馬古道">
        <img src="images/4.jpg" alt="就這家●雲逸客棧" title="就這家●雲逸客棧">
        <img src="images/5.jpg" alt="西雙版納" title="西雙版納">
        <img src="images/6.jpg" alt="雲南紅酒莊" title="雲南紅酒莊">
        <img src="images/7.jpg" alt="轎子雪山" title="轎子雪山">
        <img src="images/8.jpg" alt="普者黑" title="普者黑">
        <img src="images/9.jpg" alt="海埂大壩" title="海埂大壩">
        <img src="images/10.jpg" alt="玉龍灣" title="玉龍灣">
        <img src="images/11.jpg" alt="昆明郊野公園" title="昆明郊野公園">
        <img src="images/12.jpg" alt="歐洲風琴" title="歐洲風琴">
    </div>
    <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <!-- 原jquery網址上增長cdn.bootcss.com -->
    <!-- https://code.jquery.com/jquery-3.3.1.min.js -->
    <script>
        // 原始書寫方法
    $(document).ready(function(){
        $('a').click(function(){
            $('img')
            .eq($(this).index())
            .css({'opacity':'1'})
            .siblings()
            .css({'opacity':'0'})
        })
    })
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。