473,392 Members | 1,326 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,392 software developers and data experts.

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 1938
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

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

Similar topics

1
by: Stephen | last post by:
I have a really annoying problem with a datagrid. I have an application which populates a datagrid on the onclick event of a button. The datagrid is bound to an ArrayList which holds the values. ...
1
by: Julius Mong | last post by:
Dear all, according to the ASV3 manual known problem section, to make an <a> execute some Javascript onclick: ...
5
by: Mike | last post by:
In my previous post, I wrote: > ... > GOAL: (very simple) Provide a hyperlink which, when clicked, > calls a javascript function which opens a new URL. > ... > PROBLEM: The following code...
5
by: Alastair Anderson | last post by:
I have created a very simple form with which I would like to update a single value in a single row of a database as a proof of concept. The relevant parts of the form are a DBWebTextBox (which...
3
by: vinayak | last post by:
Hi I am displaying data in Datagrid in ASP.NET with Edit/Update functionality for each row. On the same page I have 2 Button controls which submits the request to server. These button controls...
4
by: William Sullivan | last post by:
I have an extremely weird problem that I have no idea how to approach. I have a simple page with a search textbox and a search button. The button causes a postback, where I perform the search and...
1
by: mxliron | last post by:
hi all, this code is for a picture viewer. yes, this is my first code and my first piece of programming so i maybe simply be missing some key notions here. the problem is: the nav onclick event...
18
by: len.hartley | last post by:
Hi, I am trying to pop-up a window when the user clicks on an image. The problem is that when the user clicks on the image and the window pops up OK, but the window underneath also proceeds to...
7
by: szimek | last post by:
Hi, I've got this very simple code: <body onclick="foo(event, this)"> Inside foo method in IE "this" is body object, but in FF it's window object - at least that's what MS Script Editor and...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.