Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.0k views
in Technique[技术] by (71.8m points)

js 事件 导航切换

$("#userTap").on("click","li",function(){
    var tag=$(this).data("tag");
    $(this).addClass("active").siblings().removeClass("active");
    $("#"+tag).show().siblings("div").hide();
});

这段代码用js 咋个写 请指教!!!
加上html代码

 <div id="userTap">
            <!--普通用户-->
            <div v-if="userType=='user'">
                <ul class="user_tap left">
                    <li class="active" data-tag="userInfo">个人资料</li>
                    <li data-tag="userGoods">我的购买</li>
                    <li data-tag="userEdit" class="user_edit_info">修改资料</li>
                    <li data-tag="userChange_psw">修改密码</li>
                    <li @click="loginOut">退出登录</li>
                </ul>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
<div id="app">
    <div id="userTap" @click="findtarget">
        <!--普通用户-->
        <div>
            <ul class="user_tap left">
                <li :class="{active:flag=='userInfo'}" data-tag="userInfo">个人资料</li>
                <li :class="{active:flag=='userGoods'}" data-tag="userGoods">我的购买</li>
                <li :class="{active:flag=='userEdit'}" data-tag="userEdit" class="user_edit_info">修改资料</li>
                <li :class="{active:flag=='userChange_psw'}" data-tag="userChange_psw">修改密码</li>
                <li>退出登录</li>
            </ul>
        </div>
    </div>
</div>
var vm = new Vue({
    el: "#app",
    data: {
        flag: ''    
    },
    methods:{
        findtarget(event){
            if(event.target.tagName === 'LI'){
                this.flag = event.target.getAttribute('data-tag');
            }
        }
    }
});

然后你的 $("#"+tag)部分看起来像是二级菜单,然后问题中没提供,一样绑定:class="{hide:flag=='userInfo'}"控制隐藏显示就行了


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...