实现左侧菜单功能，有以下三种方法:

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" οnclick="change(1)">菜单一</div>

            <div>

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

        <div>

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

            <div class="hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

        <div>

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

            <div class="hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

    </div>

<script src="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>

运行结果:

wKioL1fHoIfSp4ipAAC101QRKhg896.png

解析:鼠标点击菜单一时，arg == 1，通过$('#m1')获取对应标签然后赋值给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 οnclick="change(this)">菜单一</div>

            <div>

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

        <div>

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

            <div class="hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

        <div>

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

            <div class="hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

    </div>

<script src="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>

显示结果:

wKioL1fHptDixmWQAACm3Eh-ZoY327.png

解析:当点击菜单一，那么change(this)传递过来的$(arg)就是菜单一；同样如果是菜单二，则$(arg)传过来的是菜单二，依次类推，换句话说changge(this)中的this表示的就是点击的当前标签，但是通过change(this)传递到函数change(arg)中，然后用$(arg)就变成了jQuery的选择器，所以就可以把$(arg).text()交给jQuery进行分析，另外如果我们有多个菜单，这样写相对方法一要省去很多if判断的步骤。

c、方法三

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .hide{


            display: none;

        }

    </style>

</head>

<body>

    <div>

        <div>

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

            <div class ="content hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

        <div>

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

            <div class="content hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

        <div>

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

            <div class="content hide">

                <div>1</div>

                <div>2</div>

                <div>3</div>

                <div>4</div>

            </div>

        </div>

    </div>

<script src="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>

演示结果:

wKioL1fHrz7z2OETAABRlSiRRog755.png

解析:

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

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

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

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

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

$(arg).next().removeClass('hide') 在下一个标签中移除样式"hide"

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

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

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

$(arg).parent().siblings().find('.content').addClass('hide') 在所有父标签的兄弟标签中找到含有"content"的标签并且添加一个"hide"样式