showing a particular div dynamically on a html page
Question
I want to show only a particular div by calling a function though onclick event .At a time I just want to show a single div and rest all divs should not show in my web page. I have tried this through using display css property.I just want a single function which can handle this .I can do this question by making more than one function.
<html> <head> </head> <body> <ul> <li><a href="#" onclick="someFunction();">1</a></li><!-- show div1--> <li><a href="#" onclick="someFunction();">2</a></li><!-- show div2--> <li><a href="#" onclick="someFunction();">3</a></li><!-- show div3--> </ul> <div id="first">content 1</div> <div id="second">content2</div> <div id="third">content3</div> </body> </html>
3 answers
solution1
1 2015-07-15 21:41:47
How about this:
- Each div needs the same class so you can find and hide them all at once.
- The function needs to know the id of the div to show, so pass in the id.
See changes below:
<html>
<head>
</head>
<body>
<ul id="controls">
<li><a href="#" data-target="first">1</a></li><!-- show div1-->
<li><a href="#" data-target="second">2</a></li><!-- show div2-->
<li><a href="#" data-target="third">3</a></li><!-- show div3-->
</ul>
<div id="first" class="content">content 1</div>
<div id="second" class="content">content2</div>
<div id="third" class="content">content3</div>
<script>
$("#controls a").click(function() {
someFunction($(this).attr("data-target"));
});
function someFunction(divId) {
$(".content").hide();
$("#" + divId).show();
}
</script>
</body>
</html>
Note: You need a reference to jQuery for the $ syntax to work.
solution2
0 2015-07-15 20:22:06
FYI, you could do this with just CSS:
.panel {display: none} .panel:target {display: block}
<ul> <li><a href="#first">1</a></li> <li><a href="#second">2</a></li> <li><a href="#third">3</a></li> </ul> <div class='panel' id="first">content 1</div> <div class='panel' id="second">content2</div> <div class='panel' id="third">content3</div>
solution3
0 2015-07-15 20:59:50
I think this is what you want:
<ul>
<li id="li_1"><a href="#first">1</a>
</li>
<li id="li_2"><a href="#second">2</a>
</li>
<li id="li_3"><a href="#third">3</a>
</li>
</ul>
<div class='panel' id="li_1_panel">content 1</div>
<div class='panel' id="li_2_panel">content2</div>
<div class='panel' id="li_3_panel">content3</div>
.panel {
display: none;
}
var panelID = "";
for (i = 1; i <= 3; i++) {
alert('#li_' + i);
$('#li_' + i).on('click', function () {
panelID = "#" + $(this).attr("id") + "_panel";
alert(panelID);
$(panelID).toggle();
});
}
Edit Also, if you did not want to rely on a rigid naming scheme, you could use a hash .
<ul>
<li id="zeus"><a href="#first">1</a>
</li>
<li id="athena"><a href="#second">2</a>
</li>
<li id="hades"><a href="#third">3</a>
</li>
</ul>
<div class='panel' id="isis">content 1</div>
<div class='panel' id="thor">content 2</div>
<div class='panel' id="aphrodite">content 3</div>
var panelID = "";
var li_to_panel = {
"zeus": "isis",
"athena": "thor",
"hades": "aphrodite"
};
$.each(li_to_panel, function(key, value){
alert(key);
liID = "#" + key;
$(liID).on('click', function () {
panelID = "#" + li_to_panel[$(this).attr('id')];
alert(panelID);
$(panelID).toggle();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.