469,315 Members | 1,578 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,315 developers. It's quick & easy.

problem with simple onClick event - page seems to be refreshing

I've got a problem with a web page I'm working on. I have 4 modules - one of them has 2 tabs, two of them have 4 tabs. When the user clicks on the tabs, the content below them changes. However, when the user clicks on the tab (any tab), the browser goes back to the top of the page (I'm assuming it's refreshing, I'm not sure). I'm attaching the JS code below, along with the 2-tab version of the module and its accompanying CSS. Any help will be greatly appreciated.. thanks!

SteveMTNO

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.     window.onload = function() {
  3.         document.getElementById('tab2').style.display = 'block';
  4.         document.getElementById('tab3').style.display = 'block';
  5.         document.getElementById('tab7').style.display = 'block';
  6.         var topHeadlinesbutton = document.getElementById('topHeadlinesbutton');
  7.         var latestNewsbutton = document.getElementById('latestNewsbutton');
  8.         var storiesButton = document.getElementById('storiesButton');
  9.         var commentsButton = document.getElementById('commentsButton');
  10.         var emailedButton = document.getElementById('emailedButton');
  11.         var videoButton = document.getElementById('videoButton');
  12.         var jobsbutton = document.getElementById('jobsbutton');
  13.         var autosbutton = document.getElementById('autosbutton');
  14.         var homesbutton = document.getElementById('homesbutton');        
  15.         var classifiedsbutton = document.getElementById('classifiedsbutton');
  16.         topHeadlinesbutton.onclick = function() {
  17.             document.getElementById('tab1').style.display = 'block';
  18.             document.getElementById('tab2').style.display = 'none';
  19.         }   
  20.         latestNewsbutton.onclick = function() {
  21.             document.getElementById('tab1').style.display = 'none';
  22.             document.getElementById('tab2').style.display = 'block';
  23.         }
  24.         storiesButton.onclick = function() {
  25.             document.getElementById('tab3').style.display = 'block';
  26.             document.getElementById('tab4').style.display = 'none';    
  27.             document.getElementById('tab5').style.display = 'none';
  28.             document.getElementById('tab6').style.display = 'none';
  29.         }   
  30.         commentsButton.onclick = function() {
  31.             document.getElementById('tab3').style.display = 'none';
  32.             document.getElementById('tab4').style.display = 'block';    
  33.             document.getElementById('tab5').style.display = 'none';
  34.             document.getElementById('tab6').style.display = 'none';
  35.         }
  36.         emailedButton.onclick = function() {
  37.             document.getElementById('tab3').style.display = 'none';
  38.             document.getElementById('tab4').style.display = 'none';    
  39.             document.getElementById('tab5').style.display = 'block';
  40.             document.getElementById('tab6').style.display = 'none';
  41.         }
  42.         videoButton.onclick = function() {
  43.             document.getElementById('tab3').style.display = 'none';
  44.             document.getElementById('tab4').style.display = 'none';
  45.             document.getElementById('tab5').style.display = 'none';
  46.             document.getElementById('tab6').style.display = 'block';
  47.         }
  48.         jobsbutton.onclick = function() {
  49.             document.getElementById('tab7').style.display = 'block';
  50.             document.getElementById('tab8').style.display = 'none';
  51.             document.getElementById('tab9').style.display = 'none';
  52.             document.getElementById('tab10').style.display = 'none';
  53.         }   
  54.         autosbutton.onclick = function() {
  55.             document.getElementById('tab7').style.display = 'none';
  56.             document.getElementById('tab8').style.display = 'block';
  57.             document.getElementById('tab9').style.display = 'none';
  58.             document.getElementById('tab10').style.display = 'none';
  59.         }
  60.         homesbutton.onclick = function() {
  61.             document.getElementById('tab7').style.display = 'none';
  62.             document.getElementById('tab8').style.display = 'none';
  63.             document.getElementById('tab9').style.display = 'block';
  64.             document.getElementById('tab10').style.display = 'none';
  65.         }   
  66.         classifiedsbutton.onclick = function() {
  67.             document.getElementById('tab7').style.display = 'none';
  68.             document.getElementById('tab8').style.display = 'none';
  69.             document.getElementById('tab9').style.display = 'none';
  70.             document.getElementById('tab10').style.display = 'block';
  71.         }        
  72.     }
  73. </script>
  74.  
[HTML]<HTML>

<div id="background">

<div id="tabs">
<ul>
<li><a href="#" title="topHeadlines" id="topHeadlinesbutton"><span>Top headlines</span></a></li>
<li><a href="#" title="latestNews" id="latestNewsbutton"><span>Latest news</span></a></li>
</ul>
</div>

<div id="tab1">
<div id="topHeadlines">
<div class="content">
<ul>
<li>Top headlines will go here</li>
</ul>
</div>
</div>
</div>

<div id="tab2">
<div id="latestNews">
<div class="content">
<ul>
<li>
<script language="javascript" type="text/javascript" src="http://images.stltoday.com/stltoday/js/com_stltoday_rss.js"></script>
<div>
<a href="/news" class="rss_title">Latest News</a>
</div>
<div id="latest_news_rss" class="rss_item">loading...</div>
<script language="javascript" type="text/javascript">
<!--
try {
rss1 = new com_stltoday_rss_reader("latest_news_rss");
rss1.getRSS("/rss/news",12);
} catch(e) {
document.getElementById("latest_news_rss").innerHT ML="Currently offline, please try later...";
};
//-->
</script>
</li>
</ul>
</div>
</div>
</div>
</div>

</HTML>
[/HTML]

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2.  
  3.     img {
  4.         border: none;
  5.     } 
  6.  
  7.     a {
  8.         text-decoration: none;
  9.         color: #000;
  10.     }
  11.  
  12.     ul {
  13.         list-style:none;
  14.     }
  15.  
  16.     #background {
  17.         width: 300px; 
  18.         height: 229px; 
  19.         position: relative;
  20.         background-color: white;
  21.     }
  22.  
  23.       #background #tabs {
  24.         width:300px; 
  25.         height: 21px;
  26.         position: relative;
  27.         top:-1px;
  28.         left:-6px;
  29.         line-height:normal;
  30.     }
  31.  
  32.     #background #tabs ul {
  33.         margin:0px; 
  34.         padding:0px 0px 0px 5px; 
  35.     }
  36.  
  37.     #background #tabs li {
  38.         display:inline; 
  39.         margin:0px; 
  40.         padding:0px;
  41.         }
  42.  
  43.     #background #tabs a {
  44.         float:left; 
  45.         background:url("http://images.stltoday.com/stltoday/images/tableft.gif") no-repeat left top; 
  46.         margin:0px; 
  47.         padding:0px 0px 0px 4px; 
  48.     }
  49.  
  50.     #background #tabs a span {
  51.         float:left; 
  52.         display:block; 
  53.         background:url("http://images.stltoday.com/stltoday/images/tabright.gif") no-repeat right top; 
  54.         padding:5px 15px 4px 6px; 
  55.         color:#fff;
  56.         font-weight: bold;
  57.         font-size: 12px;
  58.     }
  59.  
  60.     /* Commented Backslash Hack hides rule from IE5-Mac \*/
  61.  
  62.     #background #tabs a span {
  63.         float:none;
  64.     }
  65.  
  66.     /* End IE5-Mac hack */
  67.  
  68.     #background #tabs a:hover span {
  69.         color:#fff;
  70.     }
  71.  
  72.     #background #tabs a:hover {
  73.         background-position:0% -42px;
  74.     }
  75.  
  76.     #background #tabs a:hover span {
  77.         background-position:100% -42px;
  78.     }
  79.  
  80.     #background #tab1, #background #tab2 {
  81.         width: 299px; 
  82.         height: 228px; 
  83.         border: 1px solid black;
  84.         position: relative;
  85.         left:-1px;
  86.         display: none;
  87.         background-color: white;
  88.     }
  89.  
  90.     #background #tab3, #background #tab4, #background #tab5, #background #tab6, #background #tab7, #background #tab8, #background #tab9, #background #tab10 {
  91.         width: 299px; 
  92.         height: 278px; 
  93.         border: 1px solid black;
  94.         left:-1px;
  95.         display: none;
  96.         background-color: white;
  97.     }
  98.  
  99.     #background #tab1 ul, #background #tab2 ul, #background #tab3 ul, #background #tab4 ul, #background #tab5 ul, #background #tab6 ul, #background #tab7 ul, #background #tab8 ul, #background #tab9 ul, #background #tab10 ul {
  100.         list-style: none;
  101.         padding: 0px; /* this is needed for non-IE browsers */
  102.         margin-left: 0px;
  103.         font-family: sans-serif;
  104.         font-size: 12px;
  105.     }
  106.  
  107.     #background #tab1 #topHeadlines a:hover, #background #tab2 #latestNews a:hover, #background #tab3 #stories a:hover, #background #tab4 #comments a:hover, #background #tab5 #emailed a:hover, #background #tab6 #videos a:hover, #background #tab7 #stories a:hover, #background #tab8 #comments a:hover, #background #tab9 #emailed a:hover, #background #tab10 #videos a:hover {
  108.         text-decoration: underline;
  109.     }
  110.  
  111.     #background .content { 
  112.         width: 300px; 
  113.         height: 229px; 
  114.         margin-left: 10px; 
  115.         float: left;
  116.         padding-top: 10px;
  117.     }
  118.  
  119.     #background .content2 { 
  120.         width: 300px; 
  121.         height: 279px; 
  122.         margin-left: 10px; 
  123.         float: left;
  124.         padding-top: 10px;
  125.     }
  126.  
  127.     #background .left { 
  128.         width: 155px; 
  129.         height: 259px; 
  130.         margin-top: 10px; 
  131.         margin-left: 10px; 
  132.         float: left;
  133.     }
  134.  
  135.     #background .right { 
  136.         width: 115px; 
  137.         height: 259px; 
  138.         margin-top: 10px;
  139.         margin-left: 10px;
  140.         border-left: 1px solid #e5e5e5;
  141.         float: right; /* this needs to be here for non_IE browsers to display properly */
  142.     }
  143.  
  144. </style>
Feb 25 '08 #1
2 1727
Thanks to Arty Effem on the WebDeveloper forum for giving me the solution to this problem. All I had to do was add "return false;" to the end of all the functions.

Additional thanks to Arty for letting me know 'the rules' of sites like this..
Feb 25 '08 #2
acoder
16,027 Expert Mod 8TB
Thanks to Arty Effem on the WebDeveloper forum for giving me the solution to this problem. All I had to do was add "return false;" to the end of all the functions.

Additional thanks to Arty for letting me know 'the rules' of sites like this..
That's correct and thanks for posting back. One of these rules is using code tags when posting code.

PS. welcome to TSDN (and to forums in general)!
Feb 26 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Julius Mong | last post: by
5 posts views Thread by Alastair Anderson | last post: by
3 posts views Thread by vinayak | last post: by
4 posts views Thread by William Sullivan | last post: by
1 post views Thread by mxliron | last post: by
18 posts views Thread by len.hartley | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.