点击Current Div隐藏其他人

时间：2016-07-21 15:11:33

标签： javascript jquery html

我正在学习jQuery的隐藏/显示功能，我需要拥有它，所以当我点击一个div时，它会显示div，并隐藏另一个。现在我有一个超级简洁，超级低效的方式：

$(document).ready(function(){
  $(".FifteenInfo").hide();
  $(".FourtyInfo").hide();
  $(".SixtyInfo").hide();
  $(".FifteenSpecs").hide();
  $(".FourtySpecs").hide();
  $(".SixtySpecs").hide();
    $(".Show15").click(function(){
      $(".FifteenInfo").show();
      $(".FifteenSpecs").show();
      $(".FourtySpecs").hide();
      $(".SixtySpecs").hide();
      $(".FourtyInfo").hide();
      $(".SixtyInfo").hide();
    });
});

我的HTML：

<div class="buttons">
  <button class="buttonText Show15" width="200" height="300">DSL 6</button>
  <button class="buttonText Show40" width="200" height="300">DSL 10</button>
  <button class="buttonText Show60" width="200" height="300">DSL 15</button>
  <button class="buttonText Show40" width="200" height="300">DSL 25</button>
  <button class="buttonText Show60" width="200" height="300">DSL 50</button>
</div>
<div class="FifteenInfo border">
  <h1 class="Package">DSL 6</h1>
  <div class="cableSpacer"></div>
  <h3 class="monthlyPrice">\$29.99</h3>
  <div class="cableSpacer"></div>
  <h3 class="differentbandwidth">\$39.99 Unlimited</h3>
</div>
<div class="FifteenSpecs">
  <div class="monthlyUsage">
    <h3 style="text-align: center;">Usage</h3>
    <h1 class="Usage">150</h1>
    <p class="Gigabyte">GB</p>
  </div>
  <div class="Download">
    <h3 style="text-align: center;">Download</h3>
    <h1 class="Usage" style="text-align: center;">6</h1>
    <p class="Megabyte">Mbps</p>
  </div>
  <div class="Upload">
    <h3 style="text-align: center;">Upload</h3>
    <h1 class="Usage" style="text-align: center;">800</h1>
    <p class="Megabyte">Kbps</p>
  </div>
  <div class="orderNow">
    <button class="btn btntruespeed orderButton">Order Now!</button>
  </div>
</div>
<div class="FourtyInfo border">
  <h1 class="Package">DSL 10</h1>
  <div class="cableSpacer"></div>
  <h3 class="monthlyPrice">\$29.99</h3>
  <div class="cableSpacer"></div>
  <h3 class="differentbandwidth">\$44.99 Unlimited</h3>
</div>
<div class="FourtySpecs">
  <div class="monthlyUsage">
    <h3 style="text-align: center;">Usage</h3>
    <h1 class="Usage">150</h1>
    <p class="Gigabyte">GB</p>
  </div>
  <div class="Download">
    <h3 style="text-align: center;">Download</h3>
    <h1 class="Usage" style="text-align: center;">10</h1>
    <p class="Megabyte">Mbps</p>
  </div>
  <div class="Upload">
    <h3 style="text-align: center;">Upload</h3>
    <h1 class="Usage" style="text-align: center;">1</h1>
    <p class="Megabyte">Mbps</p>
  </div>
  <div class="orderNow">
    <button class="btn btntruespeed orderButton">Order Now!</button>
  </div>
</div>

有没有办法做到这一点，它会自动检查你点击哪个div来显示它，并隐藏其他？

提前致谢。

5 个答案:

答案 0 :(得分：1)

执行此操作的一般方法是使用data-*属性将触发器元素与其内容链接起来，同时为所有内容元素提供共享类，以便将它们全部隐藏在一个中。

$('.content').hide();

$('.btn').click(function(){
    
  $('.content').hide()
  var target = $(this).data("target");
  $(target).show();
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" data-target="#content1">Show 1</button>
<button class="btn" data-target="#content2">Show 2</button>

<div id="content1" class="content">Content 1</div>
<div id="content2" class="content">Content 2</div>

答案 1 :(得分：1)

  $(".header").click(function() {

    //current div
    $header = $(this);

    //getting the next element
    $content = $header.next();

    //Hide all other than current div.
    $(".header").next().not($content).hide();

    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.toggle(500, function() {

      //change text of header based on visibility of content div
      $header.text(function() {

        //change text based on condition
        return $content.is(":visible") ? "Collapse" : "Expand";
      });
    });

  });
.container {
  width: 100%;
  border: 1px solid #d3d3d3;
}
.container div {
  width: 100%;
}
.container .header {
  background-color: #d3d3d3;
  padding: 2px;
  cursor: pointer;
  font-weight: bold;
}
.container .content {
  display: none;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="header"><span>Expand</span>
  </div>
  <div class="content">
    <ul>
      <li>This is just some random content.</li>
      <li>This is just some random content.</li>
      <li>This is just some random content.</li>
      <li>This is just some random content.</li>
    </ul>
  </div>
  <div class="header"><span>Expand</span>

  </div>
  <div class="content">
    <ul>
      <li>This is just some random content.</li>
      <li>This is just some random content.</li>
      <li>This is just some random content.</li>
      <li>This is just some random content.</li>
    </ul>
  </div>
  <div class="header"><span>Expand</span>

  </div>
  <div class="content">
    <ul>
      <li>This is just some random content.</li>
      <li>This is just some random content.</li>
      <li>This is just some random content.</li>
      <li>This is just some random content.</li>
    </ul>
  </div>

</div>

答案 2 :(得分：0)

试试这个

$(document).ready(function(){
$(".show").hide();
    $(".Show15").click(function(){
      $(".show").show();
    
    });
      $(".Show40").click(function(){
      $(".show").hide();
 });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="buttons">
  <button class="buttonText Show15" width="200" height="300">DSL 6</button>
  <button class="buttonText Show40" width="200" height="300">DSL 10</button>
 
</div>
<div class="show">
<div class="FifteenInfo border">
  <h1 class="Package">DSL 6</h1>
  <div class="cableSpacer"></div>
  <h3 class="monthlyPrice">\$29.99</h3>
  <div class="cableSpacer"></div>
  <h3 class="differentbandwidth">\$39.99 Unlimited</h3>
</div>
<div class="FifteenSpecs">
  <div class="monthlyUsage">
    <h3 style="text-align: center;">Usage</h3>
    <h1 class="Usage">150</h1>
    <p class="Gigabyte">GB</p>
  </div>
  <div class="Download">
    <h3 style="text-align: center;">Download</h3>
    <h1 class="Usage" style="text-align: center;">6</h1>
    <p class="Megabyte">Mbps</p>
  </div>
  <div class="Upload">
    <h3 style="text-align: center;">Upload</h3>
    <h1 class="Usage" style="text-align: center;">800</h1>
    <p class="Megabyte">Kbps</p>
  </div>
  <div class="orderNow">
    <button class="btn btntruespeed orderButton">Order Now!</button>
  </div>
</div>
<div class="FourtyInfo border">
  <h1 class="Package">DSL 10</h1>
  <div class="cableSpacer"></div>
  <h3 class="monthlyPrice">\$29.99</h3>
  <div class="cableSpacer"></div>
  <h3 class="differentbandwidth">\$44.99 Unlimited</h3>
</div>
<div class="FourtySpecs">
  <div class="monthlyUsage">
    <h3 style="text-align: center;">Usage</h3>
    <h1 class="Usage">150</h1>
    <p class="Gigabyte">GB</p>
  </div>
  <div class="Download">
    <h3 style="text-align: center;">Download</h3>
    <h1 class="Usage" style="text-align: center;">10</h1>
    <p class="Megabyte">Mbps</p>
  </div>
  <div class="Upload">
    <h3 style="text-align: center;">Upload</h3>
    <h1 class="Usage" style="text-align: center;">1</h1>
    <p class="Megabyte">Mbps</p>
  </div>
  <div class="orderNow">
    <button class="btn btntruespeed orderButton">Order Now!</button>
  </div>
</div></div>

答案 3 :(得分：0)

您可以使用类模式选择器

创建一个包装函数来隐藏所有类似的元素

示例代码

<OnPlatform x:TypeArguments="x:Double" iOS="4.0" Android="3.0" />

Sample Fiddle

注意：这会隐藏所有类似的类。例如：$(".buttonText").click(function() { hideAll(); var _showClass = $(this).attr("class").match(/Show.{2}/).pop(); switch (_showClass) { case "Show15": toggleSection("Fifteen", true); break; case "Show40": toggleSection("Fourty", true); break; case "Show60": toggleSection("Sixty", true); break; } }); function toggleSection(group, show) { var selector = "[class^=" + group + "]"; show ? $(selector).show() : $(selector).hide(); } 这会隐藏包含toggleSection("Fourty", true)，FourtyInfo和FourtySpecs

的元素

如果你有这种情况，我建议你尝试这样的事情：

Fourty...

由于您已指定要使用哪些类，因此将具有更多控制权。

Sample Fiddle

答案 4 :(得分：0)

这是最短的方式..适用于所有情况.. 脚本：

$(document).ready(function(){
    // at the start..
    $('body').children().first().addClass('show');
    $('div').click(function(){
        $(this).removeClass('show');
        $(this).next().addClass('show');
    });
     // at the end ..
    $('body').children().last().click(function(){
        $('body').children().first().addClass('show');
    });
});
in ur style add 

div{
    visibility: hidden;
}
.show{
    visibility: visible;
}

完整代码并正常工作Demo Here

相关问题
最新问题