显示一个 div 并隐藏其余部分答案

【问题标题】：Show one div and hide rest all显示一个 div 并隐藏其余部分
【发布时间】：2013-04-10 05:09:48
【问题描述】：

现在我正在使用淡入淡出来切换按钮单击时的内容。

我使用的脚本是

function showHide(divId){
    if (document.getElementById(divID).style.display == "none") {
        $('#'+divID).fadeIn(3000);

    } else {
        $('#'+divID).fadeOut(3000);
    }
}

如何修改上述代码以在按钮点击时显示内容。

考虑一下我有 2 个按钮

<button> button1</button>
<button> button2</button>


<div id="div1"> content of button 1 </div>
<div id="div2" style="display:hidden"> content of button 2</div>

我想显示任何一个 div，当单击 button1 时，按钮 2 的内容不应该是可见的，反之亦然。

【问题讨论】：

标签： javascript ajax html css

【解决方案1】：

更新showHide

function showHide(divID) {
    $("div").not("#" + divID).fadeOut(3000);

每次都选择淡出它们很好，因为隐藏一个 div 不会显示另一个。您可能还应该给所有这些 div 一个类并使用它，而不仅仅是 "div"

【讨论】：

【解决方案2】：

您可以在按钮上使用onclick 事件。

<button id="button1" onclick="ShowHideDiv(this);">button1</button>
<button id="button2" onclick="ShowHideDiv(this);">button2</button>
<div id="div1"> content of button 1 </div>
<div id="div2" style="display:hidden"> content of button 2</div>

在脚本标签中，可以使用该功能。

function ShowHide(element)
{
   if ($(element).attr("id") == "button1")
   {
      $("#div1").fadeIn(3000);
      $("#div2").fadeOut(3000);
   }
   else if ($(element).attr("id") == "button2")
   {
      $("#div2").fadeIn(3000);
      $("#div1").fadeOut(3000);
   }
}

如果要隐藏除一个以外的所有 div，可以使用类似以下的代码：

$("div").fadeOut(3000);

这将隐藏所有的 div。
然后这将显示正确的 div：

$("#divId").fadeIn(3000);

在 divId 中使用正确的 div id

【讨论】：

不，它不起作用，请参阅链接了解详细信息jsfiddle.net/sushanth009/utaxK/1

【解决方案3】：

我是 js 的初学者，但试试这个：

HTML：

<button id="btn1"> button1</button>
<button id="btn2"> button2</button>

<div id="div1"> content of button 1 </div>
<div id="div2" class="hidden"> content of button 2</div>

CSS：

.hidden { display: none;}

JS：

$('#btn1').click(function(){
   $('#div2').addClass('hidden');
   $('#div1').removeClass('hidden');
})
$('#btn2').click(function(){
   $('#div1').addClass('hidden');
   $('#div2').removeClass('hidden');
})

这是一个demo。

【讨论】：

【解决方案4】：

请将您的 HTML 更改为：

<button id="btn1" onclick="ShowHideDiv(this);"> button1</button>
<button id="btn2" onclick="ShowHideDiv(this);"> button</button>


<div id="div1" class='divShowHide'> content of button 1 </div>
<div id="div2" class='divShowHide'> content of button 2</div>

现在试试这个代码：

 firstCall this function on domready:

 $(document).on('click',function(){
      $('.divShowHide').fadeOut(30);
 });

function ShowHideDiv(divId){

   $('.divShowHide').fadeOut(3000);
   $(divId).fadeIn(3000);

 }

【讨论】：