单击链接时显示/隐藏Div

Question

问候第一次张贴海报的长期读者...我看起来高低不一，却找不到我想要做的。

在我的网站上，将有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>

这是我的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;

}

Answer 1

这是我的解决方案：

1）删除href="#one并将此HTML代码添加到area标签：

data-val="one"

并将ID替换为您当时要显示的div的ID。

2）添加以下jQuery代码：

$(".link").click(function() {
    var which = $(this).data('val');
    $(".tab").hide();
    $('#'+which).show();
});

请在此JSFiddle中查看在当前代码上实现的代码。

Answer 2

将click事件绑定到链接类。 （ $('.link').on('click', function (e) { .... }
防止单击默认值e.preventDefault();
隐藏可见标签。 $('.tab').hide();
显示点击链接的详细信息。 $(INSERT SELECTOR HERE).show();

这是一个小提琴。

Answer 3

这很简单：

div
{display: none;}

单击链接后，在jQuery中编写.show() 。 单击其他链接时，在jQuery中编写.hide() 。

单击链接时显示/隐藏Div

问题描述

3 个解决方案

解决方案1
3 已采纳 2013-12-19 01:30:53

解决方案2
0 2013-12-19 01:28:09

解决方案3
0 2017-03-30 00:08:59

单击链接时显示/隐藏Div

问题描述

3 个解决方案

解决方案1 3 已采纳 2013-12-19 01:30:53

解决方案2 0 2013-12-19 01:28:09

解决方案3 0 2017-03-30 00:08:59

解决方案1
3 已采纳 2013-12-19 01:30:53

解决方案2
0 2013-12-19 01:28:09

解决方案3
0 2017-03-30 00:08:59