Question

我有这个样本：

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

您可以使用索引

找到目标c1

$(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>

Answer 2

试试这个：

$(".container .menu").each(function(index) {
    $(this).click(function() {
        $(".content .c1").hide();
        $(".content .c1").eq(index).show();        
    })
})

https://jsfiddle.net/v4Lgwuma/

Answer 3

HTML：

<div class="container">
    <div class="menu" data-target="content_1">MENU1</div>
    <div class="menu" data-target="content_2">MENU2</div>
    <div class="menu" data-target="content_3">MENU3</div>
    <div class="menu" data-target="content_4">MENU3</div>
    <div class="menu" data-target="content_5">MENU4</div>
</div>
<div class="content">
    <div id="content_1" class="c1">CONTENT FOR MENU1</div>
    <div id="content_2" class="c1">CONTENT FOR MENU2</div>
    <div id="content_3" class="c1">CONTENT FOR MENU3</div>
    <div id="content_4" class="c1">CONTENT FOR MENU3</div>
    <div id="content_5" class="c1">CONTENT FOR MENU3</div>
</div>

JavaScript的：

$('.container').on('click', '.menu', function() {
    $('#' + $(this).data('target')).show().siblings().hide();
});

演示：http://jsfiddle.net/tusharj/ys5skg09/

如何显示每个菜单的内容？JQuery

3 个答案: