Javascript 单击链接时显示/隐藏Div_Javascript_Jquery_Html_Css

Javascript 单击链接时显示/隐藏Div

javascript jquery html css

Javascript 单击链接时显示/隐藏Div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,欢迎第一次海报长期读者。。。我到处张望，却没有找到我想做的事在我的网站将有建筑布局“大”超过100个房间。我想能够点击房间，并在页面的右侧调出有关该房间的信息。我希望信息是“隐藏的Div” 谢谢大家 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="screen.css" type="text/css" media="all"> </head> <bo

欢迎第一次海报长期读者。。。我到处张望，却没有找到我想做的事

在我的网站将有建筑布局“大”超过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>

将单击事件绑定到链接类。（

$（'.link'）。在（'click'，函数（e）{….}

单击“防止默认值”

e.preventDefault（）；

隐藏可见标记。

$（'.tab'）.hide（）；

显示已单击链接的详细信息。

$（在此处插入选择器）。show（）；

这是一个解决方案。

这是我的解决方案：

1）删除

href=“#one

并将此HTML代码添加到

区域

标记：

data-val="one"

并将“one”替换为此时要显示的div的ID

2）添加此jQuery代码：

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

请参见本节中在当前代码上实现的代码。

很简单：

div
{display: none;}

单击链接时，在jQuery中写入

.show（）

。

单击其他链接时，在jQuery中写入

.hide（）

。

查看jQuery的.hide（）和.show（）或jQuery的.toggle（），谢谢我会研究它。。。

div
{display: none;}