让显示隐藏功能正常工作的问题

Question

我有三个标题作为按钮。按钮 1、2 和 3。在页面加载时，我希望显示按钮 1 部分，但是如果有人单击按钮 2 或 3 以隐藏前一个按钮描述并让新按钮出现在其位置。

到目前为止我无法让它工作。我将 display: none; 添加到常规 class，但正如我所说，我希望第一个在页面加载时显示。

我做错了什么？

$('#big-three-names').click(function() {
   var thisDescription = $('.big-three-info', $(this));
   $('.big-three-info').not(thisDescription).hide().parent().removeClass('closed');
   thisDescription.slideToggle(500).parent().toggleClass('closed');
 });

.big-three {
 margin: 75px 7.5% 25px 7.5%;
 height: 900px;
 border: 1px solid black;
}
#big-three-title {
 text-align: center;
 font-size: 1.6em;
 padding: 50px 0 30px 0;
}
#big-three-description {
 text-align: center;
 font-size: 1.3em;
}
#big-three-names-out {
 width: 100%;
 height: 75px;
 margin: 50px 0;
}
.big-three-names {
 display: inline-block;
 border: 2px solid #FFF;
 width: 33.05%;
 height: 100%;
 text-align: center;
 font-size: 1.5em;
 font-weight: bold;
 background-color: #000;
 color: #FFF;
 cursor: pointer;
}
.big-three-names:hover {
 background-color: blue;
 color: #FFF;
}
.big-three-info {
 margin: 50px 20%;
 border: 1px solid black;
 height: 550px;
  display: none;
}
#big-three-info-title { 
 width: 100%;
 margin: 100px 0 25px 50px;
 font-size: 1.2em;
}
#big-three-info-description { 
 width: 100%;
 margin-left: 50px;
 font-size: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div class="big-three-out">
  <div class="big-three">
   <div id="big-three-title">The "Big Three"</div>
   <div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
   <div id="big-three-names-out">
    <div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
    <div class="big-three-info">
     <div id="big-three-info-title">
      1
     </div>
     <div id="big-three-info-description">
      Description for 1.
     </div>
    </div>
        <div class="big-three-info">
     <div id="big-three-info-title">
      2
     </div>
     <div id="big-three-info-description">
      Description for 2.
     </div>
    </div>
        <div class="big-three-info">
     <div id="big-three-info-title">
      3
     </div>
     <div id="big-three-info-description">
      Description for 3.
     </div>
    </div>
   </div>
  </div>
 </div>

Answer 1

1.WORKING DEMO

2.Updated DEMO

HTML

<div class="big-three-out">
        <div class="big-three">
            <div id="big-three-title">The "Big Three"</div>
            <div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
            <div id="big-three-names-out">
                <div class="big-three-names one">1</div><div class="big-three-names two">2</div><div class="big-three-names three">3</div>
                <div class="big-three-info one-sub">
                    <div id="big-three-info-title">
                        1
                    </div>
                    <div id="big-three-info-description">
                        Description for 1.
                    </div>
                </div>
        <div class="big-three-info two-sub">
                    <div id="big-three-info-title">
                        2
                    </div>
                    <div id="big-three-info-description">
                        Description for 2.
                    </div>
                </div>
        <div class="big-three-info three-sub">
                    <div id="big-three-info-title">
                        3
                    </div>
                    <div id="big-three-info-description">
                        Description for 3.
                    </div>
                </div>
            </div>
        </div>
    </div>

JS

$('.big-three-names').click(function() {


   $(".big-three-info").hide();
   $("."+$(this).attr("class").split(" ")[1]+"-sub").show();



    });

顺便说一句 big-three-names 是你的 class 名字而不是 ID

Answer 2

您可以使用 JQuery 执行以下操作。获取所选按钮的 html 文本并使用 JQuery 的 .eq() 显示 div。

在页面加载时首先使用 $('.big-three-info').eq(0).css("display", "block"); 显示。

$('.big-three-names').click(function() {
    var i = $( this ).html();
    $('.big-three-info').css("display", "none")
    $('.big-three-info').eq(i-1).css("display", "block");
  });

$('.big-three-info').eq(0).css("display", "block");

.big-three {
 margin: 75px 7.5% 25px 7.5%;
 height: 900px;
 border: 1px solid black;
}
#big-three-title {
 text-align: center;
 font-size: 1.6em;
 padding: 50px 0 30px 0;
}
#big-three-description {
 text-align: center;
 font-size: 1.3em;
}
#big-three-names-out {
 width: 100%;
 height: 75px;
 margin: 50px 0;
}
.big-three-names {
 display: inline-block;
 border: 2px solid #FFF;
 width: 33.05%;
 height: 100%;
 text-align: center;
 font-size: 1.5em;
 font-weight: bold;
 background-color: #000;
 color: #FFF;
 cursor: pointer;
}
.big-three-names:hover {
 background-color: blue;
 color: #FFF;
}
.big-three-info {
 margin: 50px 20%;
 border: 1px solid black;
 height: 550px;
  display: none;
}
#big-three-info-title { 
 width: 100%;
 margin: 100px 0 25px 50px;
 font-size: 1.2em;
}
#big-three-info-description { 
 width: 100%;
 margin-left: 50px;
 font-size: 1em;
}
.show{
  display:block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="big-three-out">
  <div class="big-three">
   <div id="big-three-title">The "Big Three"</div>
   <div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
   <div id="big-three-names-out">
    <div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
    <div class="big-three-info">
     <div id="big-three-info-title">
      1
     </div>
     <div id="big-three-info-description">
      Description for 1.
     </div>
    </div>
        <div class="big-three-info">
     <div id="big-three-info-title">
      2
     </div>
     <div id="big-three-info-description">
      Description for 2.
     </div>
    </div>
        <div class="big-three-info">
     <div id="big-three-info-title">
      3
     </div>
     <div id="big-three-info-description">
      Description for 3.
     </div>
    </div>
   </div>
  </div>
 </div>

Answer 3

这是另一个解决方案

$('.big-three-info').eq(0).show();//show the first 
$('.big-three-names').click(function() {
    var index = $(this).index();//getting the index for button
    $('.big-three-info').hide().eq(index).show();//first hide all then show the div with equal index 
});

JS Fiddle

让显示隐藏功能正常工作的问题

Issues getting a show hide function to work right

html

javascript

css

jquery

show-hide