通過點擊一個按鈕，通過點擊另一buttonm

關閉同一div我想提出一個頁面，將有三個按鈕1）任務，2）願景，3）管理通過點擊一個按鈕，通過點擊另一buttonm

這裏的功能必須打開一個div是 1.通過點擊任務按鈕，將打開一個單獨的div（＃mission1）。

2.通過點擊視覺按鈕，另一個div（＃vision1）將在＃mission1 div的同一位置打開，＃mission1 &＃mteam divs將關閉。

通過點擊按鈕管理DIV另一個（#mteam）應在＃mission1 &＃vision1的div的相同位置打開，並在＃mission1，＃vision1的div應關閉。等連續

我已經編寫了以下腳本

$('document').ready(function() { 

    $('#show1').click(function(){ 

    $('#mission1').slideToggle(); 


     }); 

     $('#show2').click(function(){ 

      $(' #vission1').slideToggle(); 



      }); 


      $('#show3').click(function(){ 

      $('#mteam').slideToggle(); 

       }); 
});

CSS

#mission1 
    { 
    width:450px; 
    height:200px; 
    background:#069; 
    margin-top:10px; 
    display:none; 
    position:absolute; } 


    #vission1 
    { 
    width:450px; 
    height:200px; 
    background:#096; 
    margin-top:10px; 
    display:none; 
    position:absolute; } 

    #mteam 
    { 
    width:450px; 
    height:200px; 
    background:#CC3; 
    margin-top:10px; 
    display:none; 
    position:absolute; }

HTML

<button id="show1">Mission</button> 
<button id="show2">Vision</button> 
<button id="show3">Management</button> 

     <div id="mission1">Abcd</div> 
     <div id="vission1">VVVVVVV</div> 
     <div id="mteam">MMMMMMMMM</div>

See Demo

我已經做到了，但我只面臨隱藏問題的問題。只有在點擊相同的按鈕但未點擊其他按鈕後才能操作隱藏。

請幫我一下，我該怎麼做。感謝很多提前

來源

2012-05-25 amitabhaghosh197

codeparadox的回答非常好。但是你可以使用jQuery.data（）從button元素中獲取div id。如果是的話，你必須這樣做：

<button data-href="mission1">Mission</button> 
var currentDivId = $('button').data('href');

，然後試試這個代碼：

<button id="show1" data-href="mission1">Mission</button> 
<button id="show2" data-href="vission1">Vision</button> 
<button id="show3" data-href="mteam">Management</button> 

<div id="mission1" class="demo">Abcd</div> 
<div id="vission1" class="demo">VVVVVVV</div> 
<div id="mteam" class="demo">MMMMMMMMM</div>

和JavaScript代碼：

$('document').ready(function() { 
    $('#show1, #show2, #show3').click(function() { 
     var $div = $('#' + $(this).data('href')); 
     $('.demo').not($div).hide(); 
     $div.slideToggle(); 
    }); 
});

來源

2012-05-25 08:58:25 JackingLiu

謝謝JackingLiu你是Genious。它工作完美。謝謝，謝謝，也謝謝。 – amitabhaghosh197

我已經改變它在小提琴看到演示。 http://jsfiddle.net/amitabhaghosh197/XseGB/1/ – amitabhaghosh197

根據您當前的代碼：

$('#show1').click(function(){ 
    $('#vision1, #mteam').slideUp(); 
    $('#mission1').slideToggle(); 
}); 

$('#show2').click(function(){ 
    $('#mission1, #mteam').slideUp(); 
    $('#vission1').slideToggle(); 
}); 

$('#show3').click(function(){ 
    $('#mission1, #vission1').slideUp(); 
    $('#mteam').slideToggle(); 
});

但是如果你可以改變類似這樣的標記

<button class="mission1">Mission</button> 
<button class="vission1">Vision</button> 
<button class="mteam">Management</button> 

     <div class="mission1 common">Abcd</div> 
     <div class="vission1 common">VVVVVVV</div> 
     <div class="mteam common">MMMMMMMMM</div>

，然後嘗試這個代碼

$('button').on('click', function() { 
    var current = this.className; 
    $('div.common:visible').slideUp(function() { 
    $('div.' + current).slideToggle(); 
    }); 
});

會更容易

來源

2012-05-25 08:31:12 thecodeparadox

感謝thecodeparadox但我感到困惑什麼事CSS。我在CSS中工作，但它不工作。再次感謝 – amitabhaghosh197

通過點擊一個按鈕，通過點擊另一buttonm

回答

相關問題