admin管理员组文章数量:1410730
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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="screen.css" type="text/css" media="all">
</head>
<body>
<div id="building">
<img src=".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
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;
}
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.
<!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/wikipedia/mons/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
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;
}
- look into jQuery's .hide() and .show() – Zak Commented Dec 19, 2013 at 1:04
- or jQuery's .toggle() – Cԃաԃ Commented Dec 19, 2013 at 1:08
- thanks i will reseach that... – DigitalOutcast Commented Dec 19, 2013 at 1:26
3 Answers
Reset to default 3Here is my solution:
1) Delete the href="#one and add this HTML code to the area tags:
data-val="one"
and replace "one" with the ID to the div you want to show at that moment.
2) Add this jQuery-code:
$(".link").click(function() {
var which = $(this).data('val');
$(".tab").hide();
$('#'+which).show();
});
See the code implemented on your current code in this JSFiddle.
- 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();
here's a fiddle.
It's simple:
div
{display: none;}
When link is clicked, write .show() in jQuery.
When other links are clicked, write .hide() in jQuery.
本文标签： javascriptShowHide Div when link is clickedStack Overflow
版权声明：本文标题：javascript - ShowHide Div when link is clicked - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744286330a2598898.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论