在 div 中显示和隐藏内容答案

【问题标题】：Showing and hiding contents in a div在 div 中显示和隐藏内容
【发布时间】：2016-03-03 18:58:01
【问题描述】：

有 4 个“阅读更多”按钮。单击每个按钮会在同一个 div 中显示其内容。单击两次应该隐藏内容。但是单击一个按钮然后单击下一个按钮应该显示第二个按钮的数据。我该怎么做？

我尝试使用 javascript，检查按钮单击时 div 内的内容是否为空。如果为空则显示数据，如果不是 document.getElementById("display_message").innerHTML="";

通知消息：

<input type="button" class="btn btn-default" value="READ MORE" onclick="displayNotificationMessage();">

验证信息

<input type="button" class="btn btn-default" value="READ MORE" onclick="displayVerificationMessage();">

 <div class="container" id="display_message"  >

          </div>

<script>
function displayNotificationMessage()
{

var data="abcde";   


    var msg=document.getElementById("display_message").innerHTML;

     if(msg!="")
     {

     document.getElementById("display_message").innerHTML=""; 
     }
     else
     {


     document.getElementById("display_message").innerHTML=data; 
    }
}


function displayVerificationMessage()
{

var data="bbjkhkjhkjlk";        

    var msg=document.getElementById("display_message").innerHTML;

         if(msg!="")
     {

     document.getElementById("display_message").innerHTML=""; 
     }
     else
     {


     document.getElementById("display_message").innerHTML=data; 
    }

}
</script>

但是单击一个按钮并单击下一个按钮将不会显示内容。如何做到这一点？

【问题讨论】：

你能告诉我们你尝试了什么吗？这里不是为您编写代码的地方，但如果您出错，我们可以帮助您。
您可以使用 jQuery 并使用预填充的隐藏 div 内容填充 div。
但是单击每个按钮应该在同一个 div 中显示不同的内容。 @猕猴桃榨汁机
没错。因此，您将拥有一个 div，您将填充并显示 onClick 和 3 个隐藏的 div，其中包含内容和一些 id 以知道要使用哪个"

标签： javascript php jquery

【解决方案1】：

假设你有，带有所有文本 div#content 的 div。在该 div 中，您放置 4 个 div，带有单独的文本，带有类 .sub-content 和适当的数据属性。

<div id="content">
 <div class="sub-content" data-id="b1">Some text 1<div>
 <div class="sub-content" data-id="b2">Some text 2<div>
 <div class="sub-content" data-id="b3">Some text 3<div>
 <div class="sub-content" data-id="b4">Some text 4<div>
</div>

和

<button id="b1">Button1<button>
<button id="b2">Button1<button>
<button id="b3">Button1<button>
<button id="b4">Button1<button>

那么就这么简单。

$('button').click( function () {
  if ( $('.sub-content[data-id=' +  $(this).attr("id") + ']').css("display") == "hidden" ) {
    $('.sub-content').hide();
    $('.sub-content[data-id=' +  $(this).attr("id") + ']').show();
  } else {
    $('.sub-content[data-id=' +  $(this).attr("id") + ']').hide();
  }
});

【讨论】：

这里点击 button1 隐藏它的内容，button2 隐藏 button2 的内容等等......但是我需要在按钮点击时切换 div（显示和隐藏），就像在 button1 点击应该显示它的内容一样，再次单击 button1 应隐藏内容。此外，如果我先单击 button1，然后单击 button2，则 div 应显示 button2 的内容。默认情况下，不应在 div 上显示任何内容。 - @ziemowit
这就是为什么，第二行有一个 if 语句。同样在 CSS 中放 .sub-content { display: none; }