javascript 单击链接时显示/隐藏 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20671669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/Hide Div when link is clicked
提问by DigitalOutcast
Greeting first time poster longtime reader... I have looked high and low and yet to find what i am wanting to do.
问候第一次海报的长期读者......我已经看过很多次了，但还没有找到我想做的事情。
with in my site there is going to be building layouts "Large" over 100 rooms. I want to be able to click on the rooms and on the right side of the page pull up info about that room. I want the info to be "hidden Div" thank you all advance.
在我的网站中，将有超过 100 个房间的“大”建筑布局。我希望能够点击房间并在页面右侧拉出有关该房间的信息。我希望信息是“隐藏的 Div”，谢谢大家。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="screen.css" type="text/css" media="all">
</head>
<body>
<div id="building">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg" alt="" usemap="#map">
<map id="map" name="map">
<area class="link" shape="rect" alt="" title="" coords="137,54,242,161" href="#one" target="" />
<area class="link" shape="rect" alt="" title="" coords="138,182,232,256" href="#two" target="" />
<area class="link" shape="rect" alt="" title="" coords="53,313,170,339" href="#three" target="" />
</map>
</div>
<div id="menu">
<div class="tab" id="one">
This is One
</div>
<div class="tab" id="two">
This is two
</div>
<div class="tab" id="three">
This is three
</div>
</div>
</body>
</html>
here is my css
这是我的 css
html {
padding:0px;
margin:0px;
}
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px 20px;
margin:0px;
}
#building {
float: left;
width: 75%;
background-color: #fff;
margin:0px 0px 50px 0px;
overflow: auto;
}
#menu {
float: left;
width: 25%;
background-color: #ff99CC;
overflow: auto;
}
回答by display-name-is-missing
Here is my solution:
这是我的解决方案：
1)Delete the href="#oneand add this HTML code to the areatags:
1)删除href="#one并将此 HTML 代码添加到area标签中：
data-val="one"
and replace "one" with the ID to the div you want to show at that moment.
并将“one”替换为您当时要显示的 div 的 ID。
2)Add this jQuery-code:
2）添加这个jQuery代码：
$(".link").click(function() {
var which = $(this).data('val');
$(".tab").hide();
$('#'+which).show();
});
See the code implemented on your current code in this JSFiddle.
在此JSFiddle 中查看在您当前代码上实现的代码。
回答by Jeff
- bind a click event to the link class. (
$('.link').on('click', function (e) { .... } - prevent default on the click
e.preventDefault(); - hide visible tags.
$('.tab').hide(); - show details of clicked link.
$(INSERT SELECTOR HERE).show();
- 将点击事件绑定到链接类。(
$('.link').on('click', function (e) { .... } - 防止默认点击
e.preventDefault(); - 隐藏可见标签。
$('.tab').hide(); - 显示点击链接的详细信息。
$(INSERT SELECTOR HERE).show();
here's a fiddle.
这是一把小提琴。
回答by Sukanya Sen
It's simple:
这很简单：
div
{display: none;}
When link is clicked, write .show()in jQuery.
When other links are clicked, write .hide()in jQuery.
单击链接时，用.show()jQuery编写。当其他链接被点击时，用.hide()jQuery编写。
