zoukankan      html  css  js  c++  java
  • jquery实现的tab选项卡

    作为网页的基本常见特效,我今天趁着中午下班,赶紧试一下,没想到简单的实现了,

    不过本来就是入门级的东西,就当打怪升级吧!

    效果如图:

    html:

    <ul class="nav">
        <li class="on">选项卡1</li>
        <li>选项卡2</li>
        <li>选项卡3</li>
        <li>选项卡4</li>
    </ul>
    <ul class="con">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    css:

       ul,li{
                margin: 0;
                padding: 0;
            }
            li{
                float: left;
                list-style: none;
                text-align: center;
            }
            .nav{
                width: 400px;
                height: 50px;
            }
            .nav li{
                width: 100px;
                height: 50px;
                line-height: 50px;
    
            }
           .on{
               background-color:red;
           }
            .con{
                width: 400px;
                height: 300px;
                border: 1px solid black;
                position: relative;
            }
            .con li{
                width: 400px;
                height: 300px;
                line-height: 300px;
                font-size: 50px;
                position: absolute; /**************不写left和top值默认为0***************/
                display: none;
            }
            .con li.active{
                display: block;
            }

    jquery:

       $(function(){
                $(".nav li").mouseover(function(){
                    $(this).addClass("on").siblings().removeClass("on");
                   var index= $(this).index();
                    $(".con li").eq(index).addClass("active").siblings().removeClass("active");
                })
            })
    2018年,12月开始,我要认真写博客啦
  • 相关阅读:
    Python格式符号
    Python基础知识
    HDFS 数据流程
    HDFS IO流操作
    HDFS API操作
    Hadoop 客户端环境准备
    Hadop 环境搭建 windows10+hadoop2.7.7
    Hadoop HDFS shell
    Hadoop HDFS 基础
    centos 更改清华源
  • 原文地址:https://www.cnblogs.com/lw1995/p/6664739.html
Copyright © 2011-2022 走看看