导航栏切换—云南旅游相册

时间 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>