Question

我有4个隐藏的div，我需要一次显示一个。

使用我的代码，当我点击其中一个按钮时，它会显示相应隐藏div的内容，如果我点击同一个按钮，它将隐藏内容;但是，如果我在多个按钮上单击一次，它将显示与我单击的每个按钮对应的内容。

我需要的是，如果我点击一个按钮显示一个div，当我点击另一个div时，前一个按钮会消失而新的一个显示。

我是非常新的，如果有人可以帮助我，我将不胜感激。我确实尝试了许多相关问题的解决方案，但无法使其正常工作

<p class="btn " onclick="$('#div1').toggle(800);">Show div1</p>
<p class="btn " onclick="$('#div2').toggle(800);">Show div2</p>
<p class="btn " onclick="$('#div3').toggle(800);">Show div3</p>
<p class="btn " onclick="$('#div4').toggle(800);">Show div4</p>

<div id="div1" style="display:none"; >
 <div class="container">
    <p>This is the content of div1</p>
 </div>
</div>

<div id="div2" style="display:none"; >
 <div class="container">
    <p>This is the content of div2</p>
 </div>
</div>

<div id="div3" style="display:none"; >
 <div class="container">
    <p>This is the content of div3</p>
 </div>
</div>

<div id="div4" style="display:none"; >
 <div class="container">
    <p>This is the content of div4</p>
 </div>
</div>

Answer 1

首先，我们可以对所有这些进行单个函数调用：

另外，我建议给你想要淡出一个独特CLASS的所有标签

<p class="btn" onclick="toggleDivs('#div1');">Show div1</p>

<div class="fadeOut" id="div1" style="display:none"; >
    <div class="container">
        <p>This is the content of div1</p>
    </div>
</div>

接下来，功能：

检查是否隐藏了已选择的div，以及是否运行了该函数。如果它是可见的，它是当前选择的div，没有任何反应。

var toggleDivs = function (id) {
    if ($(id).css('display') === 'none') {
        $(".fadeOut").hide(800);
        $(id).show(800);
    }
}

希望它有效！

Answer 2

要做的第一件事就是将您的按钮和它们以更加语义的方式共同作用的div绑定在一起，可能使用data-属性：

<p class="btn " data-linkedto="#div1">Show div1</p>
<p class="btn " data-linkedto="#div2">Show div2</p>
<p class="btn " data-linkedto="#div3">Show div3</p>
<p class="btn " data-linkedto="#div4">Show div4</p>

然后，当您点击任何给定按钮时，您可以隐藏所有div，并仅显示链接的那个：

$('.btn').click(function(){
   // get the div to show
   var linkedDiv = $(this).data('linkedto')
   // hide all the divs
   $('div.container').parent('div').hide();
   // show the linked one
   $(linkedDiv).show();
});

实例：http://jsfiddle.net/negk7937/

那里的中间线：

$('div.container').parent('div').hide();

由于没有在每个.container周围的包装上安装一个类，有点过于复杂 - 这可以通过添加它来解决：

<div id="div1" class="container-wrapper" style="display:none"; >
 <div class="container">
    <p>This is the content of div1</p>
 </div>
</div>

然后中间线就变成了，简单地说：

$('div.container-wrapper').hide();

Answer 3

查看以下代码

＆＃13;

$('p').on('click', function(){
   var target = $(this).attr('rel');
   $("#"+target).show().siblings("div").hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="btn" rel="div1">Show div1</p>
<p class="btn" rel="div2">Show div2</p>
<p class="btn" rel="div3">Show div3</p>
<p class="btn" rel="div4">Show div4</p>

<div id="div1" style="display:none"; >
 <div class="container">
    <p>This is the content of div1</p>
 </div>
</div>

<div id="div2" style="display:none"; >
 <div class="container">
    <p>This is the content of div2</p>
 </div>
</div>

<div id="div3" style="display:none"; >
 <div class="container">
    <p>This is the content of div3</p>
 </div>
</div>

<div id="div4" style="display:none"; >
 <div class="container">
    <p>This is the content of div4</p>
 </div>
</div>

＆＃13;

Answer 4

这是最简单的方法。只需创建一个函数并在那里执行一系列操作。您也可以继续使用切换而不是隐藏和显示。

 <script>
    function expandDiv(div){
       $('#div1').hide();
       $('#div2').hide();
       $('#div3').hide();
       $('#div4').hide();
       $('#'+div).show();
    }
    </script>

    <p class="btn " onclick="expandDiv('div1');">Show div1</p>
    <p class="btn " onclick="expandDiv('div2');">Show div2</p>
    <p class="btn " onclick="expandDiv('div3');">Show div3</p>
    <p class="btn " onclick="expandDiv('div4');">Show div4</p>

Answer 5

快速的事情：

<p class="btn" id="p1" onclick="$('.cont').hide();$('#div1').toggle(800);">Show div1</p>
<p class="btn" id="p2" onclick="$('.cont').hide();$('#div2').toggle(800);">Show div2</p>
<p class="btn" id="p3" onclick="$('.cont').hide();$('#div3').toggle(800);">Show div3</p>
<p class="btn" id="p4" onclick="$('.cont').hide();$('#div4').toggle(800);">Show div4</p>

<div class="cont" id="div1" style="display:none"; >
 <div class="container">
    <p>This is the content of div1</p>
 </div>
</div>

<div class="cont" id="div2" style="display:none"; >
 <div class="container">
    <p>This is the content of div2</p>
 </div>
</div>

<div class="cont" id="div3" style="display:none"; >
 <div class="container">
    <p>This is the content of div3</p>
 </div>
</div>

<div class="cont" id="div4" style="display:none"; >
 <div class="container">
    <p>This is the content of div4</p>
 </div>
</div>

一次显示一个隐藏的div

5 个答案: