1

我正在制作一个页面，其中将包含三个按钮 1）使命，2）愿景，3）管理

这里的功能必须是 1.通过单击任务按钮，将打开一个单独的 div(#mission1)。

2.通过单击视觉按钮，另一个 div(#vision1) 应在 #mission1 div 的相同位置打开，并且 #mission1 和 #mteam div 应关闭。

  1. 通过单击管理按钮，另一个 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>

看演示

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

请帮助我该怎么做。非常感谢提前

4

2 回答 2

1

根据您当前的代码：

$('#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-25T08:31:12.877 回答
0

thecodeparadox 的回答非常好。但是您可以使用 jQuery.data() 从按钮元素中获取 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-25T08:58:25.250 回答