javascript - 显示一个 div 并隐藏其余部分

Question

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

我用于相同的脚本是

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，当单击按钮 1 时，按钮 2 的内容不应该是可见的，反之亦然。

Answer 1

更新showHide

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

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

Answer 2

我是 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');
}) 

这是一个演示。

Answer 3

请将您的 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);

 }

Answer 4

您可以使用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