通过点击一个按钮，通过点击另一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

我已经做到了，但我只面临隐藏问题的问题。只有在点击相同的按钮但未点击其他按钮后才能操作隐藏。

请帮我一下，我该怎么做。感谢很多提前

答

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(); 
    }); 
});

谢谢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(); 
    }); 
});

会更容易

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

通过点击一个按钮，通过点击另一buttonm

相关推荐