Question

我正在开发一个项目，但我想要隐藏所有div，除了你想要看到的那个。我查了一下，遇到了很多有同样问题的人，但是他们的解决方案没有用。这是我的基本代码：

    <!doctype HTML>
<head>
  <title>Project</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
  <header>
  <div>
    <div id="container">
      <img src="http://i.imgur.com/1a4Z3tB.png" title="Tesla Motors" id="tsl_logo"/>
    <button class="btn" id="home_btn">
      <b>Home</b>
    </button>
      <button class="btn" id="roadster_btn">
      <b>Tesla Roadster</b>
    </button>
    <button class="btn" id="s_btn">
      <b>Tesla Model S</b>
    </button>
    <button class="btn" id="x_btn">
      <b>Tesla Model X</b>
    </button>
    <button class="btn" id="3_btn">
      <b>Tesla Model 3</b>
    </button>
     <button class="btn" id="founder_btn">
      <b>Oprichter</b>
    </button>
      <button class="btn" id="about_btn">
        <b>Over Tesla</b>
      </button>
    </div>
  </div>
  </header>
  <div id="bg"/>
    <div id="text">
      <div id="home_txt" class="para_text">
    <h2><b>
      Inleiding
      </b>
    </h2>
    <p id="inleiding">
    <b><u>De Opdracht:</u></b><br><br>
// information
    </p>
    <p>
      <b><u>Mijn Keuze:</u></b><br><br><img src="http://i.imgur.com/eWJnnGN.png?1" id="tsl_tblt" align="right"/>
   // information
    </p>
  </div>
      <div id="roadster_txt" class="para_text">
        // information
  </div>
  </div>
</body>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js">
  $(document).ready(function(){
    $('#home_btn').click(function(){
      $('.para_text').hide(); // Hide all tabs with class para_text
      $('#home_txt').show(); // Show only the tab you want to show
    });
    $(document).ready(function(){
      $('#roadster_btn').click(function(){
        $('.para_text').hide(); // Hide all tabs with class para_text
        $('#roadster_txt').show(); // Show only the tab you want to show
      });
</script>

如果我点击特斯拉跑车，我希望div显示它的信息，所有其他div消失。

对不起，如果您有点困惑，如果您需要更多信息或代码，请告诉我。我真的希望有人能帮助我。

Answer 1

如果你重新考虑一下，改变一些属性：

<button class="btn" id="roadster_tesla">
  <b>Tesla Roadster</b> <!--- Only change here is the id: "roadster_tesla" --->
</button>

这是上面按钮的相应div：

<div id="roadster_txt" class="para_text roadster_tesla">
 <!--- button's id is a part of this div ^^^^^^^^^^^^^^ --->
 <!--- and this structure will work for other buttons too --->
</div>

现在您可以使用此脚本：

$(document).ready(function(){
    $('.btn').click(function(){
       $('.para_text').hide(); // Hide all tabs with class para_text
       $('.'+this.id).show(); // Show only the tab you want to show
    });
});

Answer 2

$(document).ready(function() {
  $('.btn').click(function() {
    var id = "#" + $(this).attr('id').split('_')[0] + "_txt";
    $("div.para_text").hide();
    $("div" + id).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" id="home_btn"> <b>Home</b>
</button>
<button class="btn" id="roadster_btn"> <b>Tesla Roadster</b>
</button>
<button class="btn" id="s_btn"> <b>Tesla Model S</b>
</button>
<button class="btn" id="x_btn"> <b>Tesla Model X</b>
</button>
<button class="btn" id="3_btn"> <b>Tesla Model 3</b>
</button>
<button class="btn" id="founder_btn"> <b>Founder</b>
</button>
<button class="btn" id="about_btn"> <b>About Tesla</b>
</button>

<div class="para_text" id="home_txt">Home</div>
<div class="para_text" id="roadster_txt">Tesla Roadster</div>
<div class="para_text" id="s_txt">Tesla Model S</div>
<div class="para_text" id="x_txt">Tesla Model X</div>
<div class="para_text" id="3_txt">Tesla Model 3</div>
<div class="para_text" id="founder_txt">Founder</div>
<div class="para_text" id="about_txt">About Tesla</div>

Answer 3

＆＃13;

$('.btn').click(function() {
  var attrid = $(this).attr('id');
  var newid = attrid.split('_');
  console.log('div#' + newid[0] + '_txt')
  //$('#roadster_txt').toggle();
  $('#'+newid[0]+'_txt').toggle();
})

＆＃13;

.para_text {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" id="home_btn">
  <b>Home</b>
</button>
<button class="btn" id="roadster_btn">
  <b>Tesla Roadster</b>
</button>
<button class="btn" id="s_btn">
  <b>Tesla Model S</b>
</button>
<button class="btn" id="x_btn">
  <b>Tesla Model X</b>
</button>
<button class="btn" id="3_btn">
  <b>Tesla Model 3</b>
</button>
<button class="btn" id="founder_btn">
  <b>Founder</b>
</button>
<button class="btn" id="about_btn">
  <b>About Tesla</b>
</button>


<div id="roadster_txt" class="para_text">
  roadster_txt
</div>
<div id="s_txt" class="para_text">
  s_txt
</div>
<div id="x_txt" class="para_text">
  x_txt
</div>
<div id="3_txt" class="para_text">
  3_txt
</div>
<div id="founder_txt" class="para_text">
  founder_txt
</div>
<div id="about_txt" class="para_text">
  about_txt
</div>

＆＃13;

Answer 4

1）您可以在按钮中指定必须显示div。这里我使用data-container属性。 2）我猜你在页面加载时只需要显示1个div。

    <button class="btn" data-container="#home_txt">
  <b>Home</b>
</button>
  <button class="btn" data-container="#roadster_txt">
  <b>Tesla Roadster</b>
</button>
<button class="btn" data-container="#s_txt">
  <b>Tesla Model S</b>
</button>

  <div id="home_txt" class="para_text">
    home
        <--- information --->
  </div>

  <div id="roadster_txt" class="para_text" style="display:none">
    roadster    
    <--- information --->
  </div>

  <div id="s_txt" class="para_text" style="display:none">
    s    
    <--- information --->
  </div>

脚本：

$(document).ready(function(){
  $('.btn').click(function(){
    var t = $(this);
    var c = t.data("container");
    $('.para_text:not('+c+')').hide(); // Hide all tabs with class para_text but target
    $(c).show(); // Show only the tab you want to show
  });
});

隐藏除了你想看的那个之外的所有div

4 个答案: