当链接被点击时显示/隐藏Div

第一次海报长时间读者问候... 我看了高和低，但还没有找到我想要做的。当链接被点击时显示/隐藏Div

随着在我的网站会有建设布局“大”100多个房间。我希望能够点击房间，并在页面的右侧拉起有关该房间的信息。我想要的信息是“隐藏分区” 谢谢大家提前。

<!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; 

}

来源

2013-12-19 DigitalOutcast

看看jQuery的.hide（）和.show（） – Zak

或jQuery的.toggle（） –

感谢我将研制是... – DigitalOutcast

这里是我的解决方案：

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

data-val="one"

和替换与ID你想要的那一刻展现DIV“一”。

2）添加这个jQuery代码：

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

请参阅本JSFiddle您当前的代码执行的代码。

来源

2013-12-19 01:30:53

工作就像一个魅力..谢谢你... – DigitalOutcast

@DigitalOutcast没问题，人！ :) –

绑定一个click事件的链接类。。（$('.link').on('click', function (e) { .... }
防止在点击e.preventDefault();
隐藏可见标签默认$('.tab').hide();
点击链接查看详细$(INSERT SELECTOR HERE).show();

这里有一个fiddle

来源

2013-12-19 01:28:09 Jeff

很简单：

div 
{display: none;}

当用户点击链接时，jQuery的写.show()。点击其他链接时，在jQuery中编写.hide()。

来源

2017-03-30 00:08:59

当链接被点击时显示/隐藏Div

回答

相关问题