Question

现在我正在使用fadeout fadeout在点击按钮时切换内容。

我使用的脚本是

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的内容不应该是可见的，反之亦然。

Answer 1

更新showHide

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

每次选择淡出都很好，因为隐藏div不会显示另一个。你应该也可以给所有这些div一个类，而不只是"div"

Answer 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>

在script标签中，可以使用此功能。

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

如果要隐藏除1之外的所有div，可以使用类似于以下内容的代码：

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

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

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

在divId中使用div的正确ID

Answer 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 。

Answer 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);

 }

显示一个div并隐藏所有

4 个答案: