javascript - 怎样才能显示每个菜单的内容？JQuery

Question

我有这个样本:

https://jsfiddle.net/57ouufrq/

HTML

<div class="container">
    <div class="menu">MENU1</div>
    <div class="menu">MENU2</div>
    <div class="menu">MENU3</div>
    <div class="menu">MENU3</div>
    <div class="menu">MENU4</div>
</div>
<div class="content">
    <div class="c1">CONTENT FOR MENU1</div>
    <div class="c1">CONTENT FOR MENU2</div>
    <div class="c1">CONTENT FOR MENU3</div>
    <div class="c1">CONTENT FOR MENU3</div>
    <div class="c1">CONTENT FOR MENU3</div>
</div>

JS:

$(document).ready(function() {
    $('.content .c1:first-child').show();

    $('.content').on('click', 'c1', function () {   // this=c1
               //function to display the contents
    });        
}); 

我希望在用户单击菜单时显示特定内容。例如:点击MENIU3显示CONTENT FOR MENU 3，其余隐藏。

我不知道这个函数应该如何设计才能工作。

你能帮我出点主意吗？

提前致谢!

Answer 1

您可以使用其索引找到 objective-c 1

$(document).ready(function () {
    var $c1s = $('.content .c1');

    $('.container').on('click', '.menu', function () {
        var index = $(this).index();
        $c1s.hide();
        $c1s.eq(index).show();
    });

});

.container {
    width:auto;
    height:auto;
    background:red;
    float:left;
}
.content {
    float:left;
    background:blue;
    width:100px;
    height:auto;
}
.c1 {
    display:none;
}

.content .c1:first-child{display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="menu">MENU1</div>
    <div class="menu">MENU2</div>
    <div class="menu">MENU3</div>
    <div class="menu">MENU3</div>
    <div class="menu">MENU4</div>
</div>
<div class="content">
    <div class="c1">CONTENT FOR MENU1</div>
    <div class="c1">CONTENT FOR MENU2</div>
    <div class="c1">CONTENT FOR MENU3</div>
    <div class="c1">CONTENT FOR MENU3</div>
    <div class="c1">CONTENT FOR MENU3</div>
</div>