顯示一個DIV對應按鈕點擊

Question

<!--Act as button--> 
<div class="sprite-big not-visited" id="1">B1</div> 
<div class="sprite-big not-visited" id="2">B2</div> 
<div class="sprite-big not-visited" id="3">B3</div> 

<!--These are the content div--> 
<div id="D1">Some content</div> 
<div id="D2">Some content</div> 
<div id="D3">Some content</div> 

論B1 button我想點擊只顯示D1 div

在點擊B2 button隱藏以前D1 div並只顯示D2 div。

用於進一步點擊的邏輯相同。

Answer 1

使用單擊事件處理程序和基於單擊的元素ID顯示元素。

// cache all div and hide 
 
var $div = $('.div').hide(); 
 
// show the first div initially 
 
$div.first().show(); 
 

 
// bind a click event handler 
 
$('div.sprite-big').click(function() { 
 
    // hide all divs 
 
    $div.hide(); 
 
    // get div to show based on clicked element id 
 
    // and show the element 
 
    $('#D' + this.id).show(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!--Act as button--> 
 
<div class="sprite-big not-visited" id="1">B1</div> 
 
<div class="sprite-big not-visited" id="2">B2</div> 
 
<div class="sprite-big not-visited" id="3">B3</div> 
 

 
<!--These are the content div--> 
 
<div class="div" id="D1">Some content1</div> 
 
<div class="div" id="D2">Some content2</div> 
 
<div class="div" id="D3">Some content3</div>

Answer 2

Working Fiddle

jQuery的

HideDiv(); 
$('.sprite-big').on("click", function() { 
    showHide($(this).prop('id')) 
}); 

function showHide(id) { 
    HideDiv(); 
    var id = '#D' + id; 
    $(id).show(); 
} 

function HideDiv() { 

    $('#D1').hide(); 
    $('#D2').hide(); 
    $('#D3').hide(); 
} 

Answer 3

我剛剛發佈就這個問題詢問了一下前。

試試這個：

<script> 
    $('#place').on('change', function() { 
     if (this.id== '1'); 
     { 
     $("#D1").show(); 
     $("#D2").hide(); 
     $("#D3").hide(); 

     } 
     else if (this.id== '2'); 
     { 
     $("#D1").hide(); 
     $("#D2").show(); 
     $("#D3").hide(); 
     } 
     else if (this.id== '3'); 
     { 
     $("#D1").hide(); 
     $("#D2").hide(); 
     $("#D3").show(); 
     } 
     else 
     { 
     $("#D1").show(); 
     $("#D2").show(); 
     $("#D3").show(); 

     } 
    }); 
    }); 
    </script> 

<div id="D1">Some content</div> 
<div id="D2">Some content</div> 
<div id="D3">Some content</div> 

<div id = place> 
<div class="sprite-big not-visited" id="1">B1</div> 
<div class="sprite-big not-visited" id="2">B2</div> 
<div class="sprite-big not-visited" id="3">B3</div> 
</div>