Fatal编程技术网
  • jquery/
  • Jquery 隐藏除要查看的div之外的所有div

Jquery 隐藏除要查看的div之外的所有div

jquery html

Jquery 隐藏除要查看的div之外的所有div,jquery,html,Jquery,Html,我正在做一个项目，但是我想隐藏所有的div，除了你想看到的那个。我查了一下，发现很多人都有同样的问题，但他们的解决方案不起作用。这是我的基本代码： <!doctype HTML> <head> <title>Project</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="http://code.jquer

我正在做一个项目，但是我想隐藏所有的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>


项目
家
特斯拉跑车
特斯拉模型
特斯拉X型
特斯拉模型3
奥普拉希特
特斯拉上空
内莱丁


德奥德拉赫特：


//信息



米恩·基泽：


//信息


//信息
$（文档）.ready（函数（）{
$（'#home_btn'）。单击（函数（）{
$（'.para_text'）.hide（）；//隐藏带有类para_text的所有选项卡
$（'#home_txt'）.show（）；//仅显示要显示的选项卡
});
$（文档）.ready（函数（）{
$（'#roadster_btn'）。单击（函数（）{
$（'.para_text'）.hide（）；//隐藏带有类para_text的所有选项卡
$（'#roadster_txt'）.show（）；//仅显示要显示的选项卡
});
如果我点击特斯拉跑车，我希望它的信息显示的div，和所有其他div消失

很抱歉，如果有点混乱，如果您需要更多信息或代码，请告诉我。我真的希望有人能帮我解决这个问题。

如果您重新考虑，比如更改一些属性：

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

$（文档）.ready（函数（）{
$（'.btn'）。单击（函数（）{
var id=“#”+$（this.attr（'id'）.split（'uu'）[0]+'utxt”；
$（“div.para_text”）.hide（）；
$（“div”+id）.show（）；
});
})；

家
特斯拉跑车
特斯拉模型
特斯拉X型
特斯拉模型3
创始人
关于特斯拉
家
特斯拉跑车
特斯拉模型
特斯拉X型
特斯拉模型3
创始人
关于特斯拉
$（'.btn'）。单击（函数（）{
var attrid=$（this.attr（'id'）；
var newid=attrid.split（“”）；
console.log（'div#'+newid[0]+'\u txt'）
//$（'#roadster_txt'）.toggle（）；
$（“#”+newid[0]+“#txt”）.toggle（）；
})
.para\u文本{
显示：无
}

家
特斯拉跑车
特斯拉模型
特斯拉X型
特斯拉模型3
创始人
关于特斯拉
跑车
s_txt
x_txt
3_txt
方正
关于
1）您可以在按钮中指定必须显示哪个div。这里我使用数据容器属性。 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>
你想看哪个分区？你的
$（“#roadster_btn”）。单击（
代码看起来很完美。你肯定错过了其他东西。请提供你的所有代码。你必须提供复制你的问题的最低限度的示例，因为尽管你的代码不是很好，但它应该有效应该只有一个
$（文档）。就绪（函数（）{}）
在您的整个页面中。由于按钮id可以很容易地映射到div id，因此您只需要一个
单击
事件和一个
就绪
事件。我无法让它工作，更改了id等，但仍然不工作。您是否可以尝试实现它，看看它是否工作，因为我是如何做到的work@SamB.这很管用e、 您是否也将该类添加到
div
s？是的，但是如果我想为s型添加该类，我是否只添加了“para_text s_tesla”？它可以工作，但当我实现它时，它没有任何作用。这是我的：

$(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
    });
});



    <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
  });
});