我正在开发一个项目,但我想要隐藏所有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消失。
对不起,如果您有点困惑,如果您需要更多信息或代码,请告诉我。我真的希望有人能帮助我。
答案 0 :(得分: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
});
});
答案 1 :(得分:0)
$(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>
答案 2 :(得分:0)
$('.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;
答案 3 :(得分:0)
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
});
});