zoukankan      html  css  js  c++  java
  • 导航栏切换jquery

    style.css

    @charset "utf-8";
    /* CSS Document */
    
    *{padding:0px; margin:0px;}
    a{color:#00007F;text-decoration:none; color:#FFF; display:block;width:150px; height:30px; text-indent:14px; }
    ul,li{ list-style-type:none;}
    ul.menu{width:150px; margin:0 auto; margin-top:40px; background:#333;border-color:#000;border-style:solid;border-width:0px 1px 1px;}
    ul.menu li.level1 a.current{ background:#000;}
    ul.menu li.level1 a{background:#333; border-bottom:1px solid #FFF;}
    ul.menu li.level1 ul.level2{ display:none;}
    ul.menu li.level1 ul.level2 li a{ background:#FFF; color:#000;}

    index.html

    <ul class="menu">
            <li class="level1">
                <a class="current" href="#">衬衫</a>
                <ul class="level2">
                    <li><a href="#">短袖衬衫</a></li>
                    <li><a href="#">长袖衬衫</a></li>
                    <li><a href="#">短袖T-shirt</a></li>
                </ul>
            </li>
            <li class="level1">
                <a href="#">卫衣</a>
                <ul class="level2">
                    <li><a href="#">开襟卫衣</a></li>
                    <li><a href="#">套头卫衣</a></li>
                    <li><a href="#">运动卫衣</a></li>
                </ul>
            </li>
            <li class="level1">
                <a style="border-bottom:0px;" href="#">裤子</a>
                <ul class="level2">
                    <li><a href="#">短裤</a></li>
                    <li><a href="#">休闲裤</a></li>
                    <li><a href="#">牛仔裤</a></li>
                </ul>
                </li>
        </ul>
    $(".level1>a").click(function(){
                $(this).addClass("current")
                .next().show()
                .parent().siblings().children("a").removeClass("current")
                .next().hide();
                return false;
            });
  • 相关阅读:
    RabbitMq(四)远程过程调用RPC
    RabbitMq(三)交换机类型
    RabbitMq(二)工作队列
    java基础知识01--JAVA准备
    匿名子类
    网络之Socket详解
    网络之Socket、TCP/IP、Http关系分析
    Eclipse搭建springboot项目(九)常用Starter和整合模板引擎thymeleaf
    Vue学习——Router传参问题
    sql函数——find_in_set()
  • 原文地址:https://www.cnblogs.com/xuyaoxiang1991/p/3350545.html
Copyright © 2011-2022 走看看