思路：
需要标题和页面内容两个部分，几个标题就对应几个页面，页面设置定位使其重叠，在美化一下css样式即可
当点击某个标题时，显示出与标题相关的内容，同时标题样式发生变化，然后关联需要展示的页面内容，切换标题的同时页面同时切换
1、获取元素；
2、for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件，这里用的是onclick事件；
3、点击标题时会有背景颜色，通过for循环实现当指向哪一个标题时给它添加背景，并且让其他标题的背景属性为空。
4、点击当前标题时同时展示内容。
HTML部分：

点击查看代码 
<div class="box">
        <div class="box_top">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        <div class="box_bottom">
            <div><img src="./images/1.jpg" alt=""></div>
            <div><img src="./images/2.jpg" alt=""></div>
            <div><img src="./images/3.jpg" alt=""></div>
            <div><img src="./images/5.jpg" alt=""></div>
        </div>
    </div>

CSS部分：

点击查看代码 
 * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            margin: 50px auto;
        }

        .box .box_top {
            width: 100%;
            height: 60px;
            background: rgb(168, 203, 246);
            display: flex;
            text-align: center;
            line-height: 60px;
        }

        .box .box_top span {
            flex: 1;
            cursor: pointer;
        }

        .box .box_bottom {
            height: 540px;
            width: 100%;
            background: rgb(178, 216, 237);
            position: relative;
        }

        .bgc {
            background: rgb(226, 16, 16);
            color: #fff;
        }

        .box .box_bottom div {
            height: 540px;
            width: 100%;
            background: rgb(230, 132, 71);
            font-size: 100px;
            color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .box .box_bottom div img {
            width: 100%;
            height: 100%;
        }

        .box .box_bottom div.show {
            display: block;
        }

JS部分：

点击查看代码 
 <script>
        onload = function () {
            //获取元素
            var box = document.querySelector('.box')
            var spans = box.querySelectorAll('span')
            var divs = box.querySelector('.box_bottom').querySelectorAll('div')
            console.log(divs);
            // 标题切换

            for (var i = 0; i < spans.length; i++) {
                // 给每个span自定义一个叫做index的属性，值是i，作用是用来作为连接box_bottom的div元素
                spans[i].setAttribute('index', i)
                spans[i].onclick = function () {
                    for (var j = 0; j < spans.length; j++) {
                        // 当指向哪一个span时给它添加背景，并且让其他span的背景属性为空
                        spans[j].className = ''
                        divs[j].className = ''
                    }
                    this.className = 'bgc'
                    //切换内容
                    // 获得每次this指向哪一个span时代表的值，将其转为数值类型
                    var index = this.getAttribute('index') - 0
                    // 当前的div设置一个show的类型
                    divs[index].className = 'show'
                }
            }

        }
    </script>

原文地址：http://www.cnblogs.com/qianfanqf/p/16904933.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性