• jquery实现导航栏分级切换


    注意:jQuery的jar包后缀为.js,而且在myeclipse中需要放在WebRoot下!

    点击shirt3时:

      

    点击shirt时:

    代码如下

    <%@ page language="java" pageEncoding="UTF-8"%>
    <!doctype html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8" />
    <title>index</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <div class="box">
            <ul class="menu">
                <li class="level1"><a href="#none">shirt</a>
                    <ul class="menu">
                        <li class="level2">
                        <a href="#none">long shirt</a> 
                        <a href="#none">short shirt</a></li>
                    </ul></li>
            
                <li class="level1"><a href="#none">shirt2</a>
                    <ul class="menu">
                        <li class="level2">
                        <a href="#none">long shirt2</a> 
                        <a href="#none">short shirt2</a></li>
                    </ul></li>
                <li class="level1"><a href="#none">shirt3</a>
                    <ul class="menu">
                        <li class="level2">
                        <a href="#none">long shirt3</a> 
                        <a href="#none">short shirt3</a></li>
                    </ul></li>
                <li class="level1"><a href="#none">shirt4</a>
                    <ul class="menu">
                        <li class="level2">
                        <a href="#none">long shirt4</a> 
                        <a href="#none">short shirt4</a></li>
                    </ul></li>
            </ul>
        </div>
        <script type="text/javascript">
            $(".level1>a").click(function(){
                $(this).addClass("current").next().show().parent().siblings().
                children("a").removeClass("current").next().hide();
                return false;
            })
        </script>
    </body>
    </html>
    导航栏a.jsp
  • 相关阅读:
    Win7。56个进程让我头疼
    bzoj2843极地旅行社
    bzoj2751[HAOI2012]容易题(easy)
    bzoj3442学习小组
    bzoj4423[AMPPZ2013]Bytehattan
    bzoj4591[Shoi2015]超能粒子炮·改
    bzoj2299[HAOI2011]向量
    bzoj3223Tyvj 1729 文艺平衡树
    bzoj2563阿狸和桃子的游戏
    bzoj3673可持久化并查集 by zky&&bzoj3674可持久化并查集加强版
  • 原文地址:https://www.cnblogs.com/fie666/p/7372431.html
Copyright © 2020-2023  润新知