zoukankan      html  css  js  c++  java
  • 选项卡切换

    html:

    <div class="box clearfix">
            <div class="box1">
               <ul>
                    <li class="on"><a href="">按钮一</a></li>
                    <li><a href="">按钮二</a></li>
                    <li><a href="">按钮三</a></li>
                    <li><a href="">按钮四</a></li>
                    <li><a href="">按钮五</a></li>
                </ul>
                </div>
            <div class="box2">
                 <img src="/content/subject/练习/images/lc01.jpg" alt="">
                 <img src="/content/subject/练习/images/lc02.jpg" alt="">
                 <img src="/content/subject/练习/images/lc03.jpg" alt="">
                 <img src="/content/subject/练习/images/lc04.jpg" alt="">
                 <img src="/content/subject/练习/images/lc05.jpg" alt="">
            </div>
        </div>

    css:

    .box1{float:left;}
    .box1 li{height: 20px;padding:10px;background: pink;width: 50px;border-bottom: 1px solid #fff;}
    .box2{height: 202px;width: 200px;border:1px solid red;float: left;overflow: hidden;}
    .box1 .on{background:yellow}

    js:

    $(function(){
        table();
        function table(){
            var box=$(".box");
            box.children(".box1").on("mouseover","li",function(){
                var o=$(this);
                var op=o.parents(".box1");
                var os=o.siblings("li");
                var index=o.index();
                os.removeClass('on');
                o.addClass('on');
                var iteams=op.siblings(".box2").children("img");
                iteams.hide();
                iteams.eq(index).show();
            });
        }
    });
  • 相关阅读:
    关于影像颜色替换
    DevExpress TreeList控件的复选框
    深刻理解Vue中的组件
    【Vue】组件的基础与组件间通信
    vue语法糖
    vue中prop传值时加不加v-bind(冒号:)
    Vue从入门到实战
    vue-router实现原理
    Vue学习笔记——Vue-router
    Vue-router 学习笔记
  • 原文地址:https://www.cnblogs.com/itlichen/p/5831218.html
Copyright © 2011-2022 走看看