首页 > 代码库 > JavaScript实例操作

JavaScript实例操作

1、实现左侧菜单功能

a、方法一

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .hide{


            display: none;

        }

    </style>

</head>

<body>

    <div>

        <div>

            <div id="m1" onclick="change(1)">菜单一</div>

            <div>

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

        <div>

            <div id="m2" onclick="change(2)">菜单二</div>

            <div class="hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

        <div>

            <div id="m3" onclick="change(3)">菜单三</div>

            <div class="hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

    </div>

<script src="http://www.mamicode.com/jquery-3.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">

    function change(arg){

        if(arg == 1){

            var menu=$(‘#m1‘)

        }else if(arg == 2){

            var menu = $(‘#m2‘)

        }else{

            var menu = $(‘#m3‘)

        }

        console.log(menu.text());


    }

</script>

</body>

</html>

运行结果:

技术分享

解析:鼠标点击菜单一,通过 == 1,通过$(‘#1‘)获取对应标签然后赋值给menu,即点击的标签;两个标签之间的内容为menu.text()。


b、方法二

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .hide{


            display: none;

        }

    </style>

</head>

<body>

    <div>

        <div>

            <div onclick="change(this)">菜单一</div>

            <div>

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

        <div>

            <div  onclick="change(this)">菜单二</div>

            <div class="hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

        <div>

            <div onclick="change(this)">菜单三</div>

            <div class="hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

    </div>

<script src="http://www.mamicode.com/jquery-3.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">

     function change(arg){


         var t = $(arg).text();

         console.log(t);

     }


</script>

</body>

</html>

显示结果:

技术分享

解析:当点击菜单的时候,通过 = $(arg).text获取当前标签的内容;this本身是js的一个元素,但是通过change(this)传递到change(arg)中,然后通过var t = $(arg).text();让jQuery进行分析,具体在哪个标签里面去获取内容。

c、方法三

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .hide{


            display: none;

        }

    </style>

</head>

<body>

    <div>

        <div>

            <div onclick="change(this)">菜单一</div>

            <div class ="content hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

        <div>

            <div  onclick="change(this)">菜单二</div>

            <div class="content hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

        <div>

            <div onclick="change(this)">菜单三</div>

            <div class="content hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

    </div>

<script src="http://www.mamicode.com/jquery-3.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">

     function change(arg){

         $(arg).next().removeClass(‘hide‘);

         $(arg).parent().siblings().find(‘.content‘).addClass(‘hide‘);

     }


</script>

</body>

</html>

演示结果:

技术分享

解析:

$(arg)表示当前点击的标签

①找到下一个标签,移除hide

$(arg).next()下一个标签

removeClass(‘‘)删除标签中的某个属性

addClass(‘‘)当前标签中添加一个属性

$(arg).next().removeClass(‘hide‘)

②、找到其他标签,隐藏其内容,即添加一个hide

$(arg).parent()当前标签的父标签

$(arg).parent().siblings() 所有父标签的兄弟标签

$(arg).parent().siblings().find(‘.content‘).addClass(‘hide‘)

本文出自 “平平淡淡才是真” 博客,请务必保留此出处http://ucode.blog.51cto.com/10837891/1845141

JavaScript实例操作