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"

并将“one”替换为您想要在当时显示的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();

这是一个fiddle。

Answer 3

很简单：

div
{display: none;}

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

单击链接时显示/隐藏Div

3 个答案: