How can I make two divs, so that only one will be displayed, and they can be swapped in real time?
Question
Im trying something like this, but it doesn't seem to work.
JS:
<script type="text/javascript">
function recent() {
document.getElementById('top').style.display = "none";
document.getElementById('recent').style.display = "block";
alert('Recent');
}
function top() {
alert('Top');
document.getElementById('recent').style.display = "none";
document.getElementById('top').style.display = "block";
}
</script>
HTML:
<div id="content">
<div id="header"><a href="#" onClick="javascript:recent();">Recent</a> | <a href="#" onClick="javascript:top();">Top rated</a></div>
<div id="top">
<p>TOP Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="recent">
<p>RECENT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
CSS: ,
#top {display:none}
Any help would be greatly appreciated.
EDIT
I tried it in firefox, works fine. New question. Why doesn't it work in opera?
8 answers
solution1
1 2011-07-15 11:28:24
Working demo: http://jsfiddle.net/hFUhA/
Some points...
recent = function(){} is better construction for functions as it allows you to define the scope of the function explicitly
it is good to return false on click events to prevent default behavior: onClick="top(); return false;"
and javascript: is not necessary in onClick, only in href (and is not recomended way to execute javascript for most circumstances)
solution2
0 2011-07-15 11:24:23
Try using the Error Console.
The mistake is the "javascript:" Part in the onClick handler. everything inside of onClick is already javascript.
Also I'd suggest using jQuery, which enables you to use such nice statements as
$('#recent').show();
$('#top').hide();
It's not a bad idea to start with raw javascript for learning purposes, though.
solution3
0 2011-07-15 11:26:07
As long as you already define the recent and top functions early enough in your script, then it should work.
It's running fine on JSFiddle (but check the values for the settings on the left).
solution4
0
The javascript: is your problem. That's incorrect syntax for the onclick attribute. That was what people used to use when they were putting JavaScript into the href attribute. Remove that and it should work.
solution5
0 2011-07-15 11:28:34
well, I don't really see a problem in the code. What exactly is the problem? That both div are shown initially? If so, just add inline style to #top element, with "style='display:none'" (to be sure that only one is shown at startup...altough you said this is set from the css.. )
solution6
0 2011-07-15 11:34:05
I think that your "onClick' must be in lower case: "onclick". By the way, you must add return false to your code:
<a href="#" onclick="recent();return false;">Recent</a>
solution7
0 2011-07-15 13:09:50
The following code works on firefox:
<html>
<head>
<script type="text/javascript">
function recent() {
document.getElementById('top').style.display = "none";
document.getElementById('recent').style.display = "block";
}
function top() {
document.getElementById('recent').style.display = "none";
document.getElementById('top').style.display = "block";
}
</script>
</head>
<body>
<div id="content">
<div id="header"><a href="#" onclick="recent();return false;">Recent</a> | <a href="#" onclick="top();return false;">Top rated</a></div>
<div id="top">
<p>TOP Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="recent">
<p>RECENT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
solution8
0 ACCPTED
After doing a little bit of testing, I've learned that "top" is acting like a reserved word. Although I can't seem to find any consistent documentation on this, changing the name of the "top" function to "show_top", fixes the problem.
Tested in Mozilla Firefox 5.0, IE9, Opera 11.50, and Chromium (Google Chrome) 12.0.742.112
Note that, even without this modification, it worked in Mozilla Firefox and Chromium.
Update: Still a poor substitute for documentation, but I found one page that gives some explanation of "top": http://www.dotnetspider.com/forum/179582-top-javascript.aspx
Update #2: Eureka, This one was really bugging me. so I found documentation...
From Dottoro.com, window object:
The members of the current window are accessible directly, without using the window object as a prefix (eg you can use document instead of window.document), furthermore the global variables and objects are also accessible through the window object (var x = 2; alert (window.x);).
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.