四、day02切换滑块

最新推荐文章于 2025-06-05 20:08:17 发布

[Augenstern]

最新推荐文章于 2025-06-05 20:08:17 发布

阅读量145

点赞数

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_44627935/article/details/124722705

版权

tab切换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab切换</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .selector{
            width: 400px;
            height: 200px;
            background-color: deepskyblue;
            border: 6px solid deepskyblue;
        }
        aside{
            width: 100px;
            height: 200px;
            float: left;
        }
        aside p{
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            color: #fff;
            text-align: center;
        }
        aside p.now, aside p:hover{
            background-color: #fff;
            color: deepskyblue;
            cursor: pointer;
        }
        main{
            width: 300px;
            height: 200px;
            float: left;
            background-color: #fff;
        }
        main p{
            width: 94%;
            height: 50px;
            margin: 0 auto;
            line-height: 50px;
            box-sizing: border-box;
            border-bottom: 2px solid deepskyblue;
            text-indent: 20px;
        }
        main div{
            width: 94%;
            height: 150px;
            margin: 0 auto;
            display: none;
        }
        main div.dylj{
            background-color: tomato;
            display: block;
        }
        main div.xd{
            background-color: gold;
        }
        main div.zlj{
            background-color: hotpink;
        }
        main div.mbfx{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="selector">
        <aside>
            <p class="now">大娱乐家</p>
            <p>小段</p>
            <p>侏罗纪</p>
            <p>末班飞行</p>
        </aside>
        <main>
            <p class="title">娱乐至上</p>
            <div class="dylj"></div>
            <div class="xd"></div>
            <div class="zlj"></div>
            <div class="mbfx"></div>
        </main>
    </div>
</body>
<script>
    // 点击不同的选项卡，右侧的标题切换，右侧的内容块切换

    var ps = document.querySelectorAll("aside p");
    var pTitle = document.querySelector(".title");
    var ds = document.querySelectorAll("main div");

    var index = 0;  //now的下标
    // 1.在标签内部添加任意属性来存储数据
    // 2.使用数组
    var arr = ["娱乐至上", "散落的音乐", "陪你看电影", "最后的目的地"];

    //添加点击事件
    for (var i=0; i<ps.length; i++){
        // 为每一个选项卡添加自定义属性  index下标
        ps[i].index = i;
        ps[i].onclick = function(){
            // 点击的就是显示的内容
            if (this.index === index){
                return;
            }
            
            // 修改now
            ps[index].className = "";
            this.className = "now";
            // 修改显示的div内容
            ds[index].style.display = 'none';
            ds[this.index].style.display = 'block';
            // 修改title的值
            pTitle.innerHTML = arr[this.index];
            // 修改index的值
            index = this.index;
        }
    }
</script>
</html>

在这里插入图片描述

滑块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑块</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        nav{
            position: relative;
            height: 60px;
            line-height: 60px;
            color: #fff;
            background-color: #666;
            display: flex;
            justify-content: space-around;
        }
        p{
            z-index: 1;
            width: 80px;
            height: 60px;
            text-align: center;
        }
        .slider{
            position: absolute;
            width: 80px;
            height: 60px;
            background-color: rgba(255, 0, 0, .45);
            transition: .3s;
        }
    </style>
</head>
<body>
    <nav>
        <p>春节</p>
        <p>元宵节</p>
        <p>清明节</p>
        <p>端午节</p>
        <p>七夕节</p>
        <p>中秋节</p>
        <p>重阳节</p>
        <p>冬至</p>
        <p>除夕</p>
        <div class="slider"></div>
    </nav>
</body>
<script>
    // 获取节日标签
    var ps = document.querySelectorAll("p");
    var dSlider = document.querySelector(".slider");

    // 先把slider定位到第一个节日标签
    dSlider.style.left = ps[0].offsetLeft + 'px';

    // 为p标签添加鼠标移入事件
    for(var i=0; i<ps.length; i++){
        ps[i].onmouseenter = function(){
            dSlider.style.left = this.offsetLeft + 'px';
        }
    }
</script>
</html>

在这里插入图片描述

微博选项卡：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博选项卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap {
            width: 320px;
            height: 568px;
            background-color: pink;
            box-shadow: 0 0 3px #111;
            margin: 0 auto;
            position: relative;
        }
        nav {
            text-align: center;
            height: 44px;
            line-height: 44px;
            background-color: aliceblue;
            border-bottom: 1px solid #333;
        }
        .window {
            width: 320px;
            height: 60px;
            position: relative;
        }
        .slider {
            width: 320px;
            height: 60px;
            background-color: antiquewhite;
            border-bottom: 1px solid #333;
            overflow-x: scroll;
            overflow-y: hidden;
        }
        .move {
            width: 720px;
            padding-right: 40px;
        }
        .move p {
            float: left;
            width: 80px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
        .more {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: orange;
        }
        .alert{
            width: 320px;
            height: 568px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #ebebeb;
            z-index: 1;
            overflow: scroll;
        }
        .alert p{
            height: 40px;
            /* background-color: cyan; */
            box-sizing: border-box;
            padding: 10px;
        }
        .alert p span:nth-last-of-type(1){
            float: left;
            line-height: 20px;
        }
        .alert p span:nth-last-of-type(2){
            float: right;
            line-height: 20px;
            color: gold;
        }
        .alert div{
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .alert div span{
            width: 66px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            box-sizing: border-box;
            margin: 5px 0;
            font-size: 14px;
        }
        .alert .mine span{
            background-color: lightgray;
            position: relative;
        }
        .alert .mine span strong{
            position: absolute;
            left: -8px;
            top: -8px;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            background-color: #666;
            color: #fff;
            line-height: 16px;
            text-align: center;
            font-size: 12px;
        }
        .alert .tj span{
            border: 1px dashed black;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <nav>微博</nav>
        <div class="window">
            <div class="more">+</div>
            <div class="slider">
                <div class="move">
                    <p>热门</p>
                </div>
            </div>
        </div>
        <div class="alert">
            <p>
                <span>完成</span>
                <span>我的频道</span>
            </p>
            <div class="mine">
                <span>热门</span>
                <!-- <span>
                    <em>热门</em>
                    <strong>×</strong>
                </span> -->
            </div>
            <p>
                <span>推荐频道</span>
            </p>
            <div class="tj">
                <!-- <span>热门</span> -->
            </div>
        </div>
    </div>
</body>
<script>
    //数据
    var pds = ["同城","抗疫","财经","读书","摄影","电影","体育","综艺","时尚","星座","故事","房产","家居","萌宠","科普","动漫","艺术","美妆","音乐","法律","设计","历史","瘦身","游戏","校园","抽奖","育儿","婚恋","吃鸡","王者","教育","养生"];
    var dTj = document.querySelector(".tj");
    var dMine = document.querySelector(".mine");
    // 将数据显示在 推荐 模块中
    function showDataInTj(){
        //生成 span 放到 d.tj 里
        for(var i=0; i<pds.length; i++){
            createSpan(pds[i]);
        }
    }
    showDataInTj();
            // var span = document.createElement("span");
            // span.innerHTML = '+' + info;
            // dTj.appendChild(span);

            // 生成 d.tj 的span
            function createSpan(info){
            var span = document.createElement("span");
            span.innerHTML = '+' + info;
            dTj.appendChild(span);

            //点击事件
            span.onclick = function(){
                // 1.在d.mine里生成新的标签
                var ss = document.createElement("span");
                ss.innerHTML = `
                <em>${this.innerHTML.substr(1)}</em>
                <strong>×</strong>
                `;
                dMine.appendChild(ss);
                // 获取strong标签，添加点击事件
                var strong  = ss.querySelector("strong");
                strong.onclick = del;
                // 2.让自己消失掉
                dTj.removeChild(this);
            }
        }

        // 点击strong的×
        function del(){
            // 在 d.tj 里生成对应的标签
            var str = this.previousElementSibling.innerHTML; //previousElementSibling上一个节点  nextElementSibling下一个节点
            createSpan(str);
            // 把自己删掉
            dMine.removeChild(this.parentNode);
        }
    
</script>
</html>