JQ实现2个type点击后div切换

最新推荐文章于 2024-06-17 18:10:25 发布

weixin_33995481

最新推荐文章于 2024-06-17 18:10:25 发布

阅读量431

点赞数

文章标签： javascript 前端 php ViewUI

原文链接：https://my.oschina.net/wsyblog/blog/666595

版权

2019独角兽企业重金招聘Python工程师标准>>>

实现:

点击follower显示div1，点击engagemnet显示div2。可能有更好的循环显示的方法，不过我不是学js的。。。只能用比较笨的方法=0=

css:

#select_menu_type li.on,#select_menu_type li:hover{border:1px solid #ddd;border-bottom: 1px solid #fff;padding: 0;color: #505050;}

html:

<div id="select_menu_type">
    <ul>
        <li class="on" id="comparefollower"><?php echo Yii::t('manager', 'Follower'); ?></li>
        <li id="compareengagement"><?php echo Yii::t('manager', 'Engagement'); ?></li>
    </ul>
</div>
<div class="comparefollower">
    <label>1</label>
</div>
<div class="compareengagement">
    <label>2</label>
</div>

js:

<script>
    //初始化加载follower，隐藏engagement
    window.onload = function () {
        $(".compareengagement").hide();
        $("#compareengagement").removeClass("on");
        $(".comparefollower").show();
    };
    //点击跳转follower-div
    $("#comparefollower").click(function () {
        $(".compareengagement").hide();
        $("#compareengagement").removeClass("on");
        $(".comparefollower").show();
        $("#comparefollower").addClass("on");
    });
    //点击跳转engagement-div
    $("#compareengagement").click(function () {
        $(".comparefollower").hide();
        $("#comparefollower").removeClass("on");
        $(".compareengagement").show();
        $("#compareengagement").addClass("on");
    });
</script>

转载于:https://my.oschina.net/wsyblog/blog/666595