如何顯示每個菜單的內容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

可以使用其指數

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

的Html找到目標C1：

<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/

Answer 3

試試這個：

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

https://jsfiddle.net/v4Lgwuma/