title: Javascript tabbed search box
body: <p>I have a search box with JavaScript and CSS tabs on it which control the destination of the search. However, when you click on a tab and then click back on the same tab you are then unable to select that tab again. I want to make it so that it isn't possible to click on the selected tab. How can I go about doing this?</p>
  
  <p>I have posted a copy of my code below.</p>
  
  <p>My JavaScript:</p>
  
  <pre><code>var isDOM = (document.getElementById ? true : false);
  
  function getElement(id) {
      if (isDOM) {
          return document.getElementById(id);
      }
  }
  
  function pageSheetClick(pageSheet) {
      if (pageSheet &amp;&amp; pageSheet.id) {
          mode = 0;
          pageSheet.className = 'bookmarkCenterSel';
          selectedPageSheet = pageSheet;
      }
  }
  
  function CheckKey(e) {
      if (typeof (e.keyCode) == 'number') {
          e = e.keyCode;
      }
      if (e == 13) {
          changePage(getElement('q').value);
      }
  }
  
  var lastTab;
  function pageSheetClick(pageSheet) {
      if (pageSheet &amp;&amp; pageSheet.id) {
          mode = 0;
          pageSheet.className = 'bookmarkCenterSel';
          selectedPageSheet = pageSheet;
          if (lastTab != null) lastTab.className = "";
          lastTab = pageSheet;
      }
  }
  
  function changePage(findtext) {
      var tmp = findtext;
      if (mode == 0) {
          pId = selectedPageSheet.id.split('_');
          if (pId[0] == 'web') html = "/search/" + tmp + "/1/";
          if (pId[0] == 'images') html = "/images/" + tmp + "/1/";
          if (pId[0] == 'videos') html = "/videos/" + tmp + "/1/";
          if (pId[0] == 'news') html = "/news/" + tmp + "/1/";
          if (pId[0] == 'twitter') html = "/twitter/" + tmp + "/1/";
      }
      if (tmp != "") window.location = html;
  }
  </code></pre>
  
  <p>Then my HTML and CSS:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .bookmarkCenterSel{
  font-weight:bold;
  text-decoration:none;
  }
  &lt;/style&gt;
  
  &lt;a href="javascript:void(null);" id="web_center" onclick="pageSheetClick(this);"&gt;Web&lt;/a&gt;
  &lt;a href="javascript:void(null);" id="images_center" onclick="pageSheetClick(this);"&gt;Images&lt;/a&gt;
  &lt;a href="javascript:void(null);" id="videos_center" onclick="pageSheetClick(this);"&gt;Videos&lt;/a&gt;
  &lt;a href="javascript:void(null);" id="news_center" onclick="pageSheetClick(this);"&gt;News&lt;/a&gt;
  &lt;a href="javascript:void(null);" id="twitter_center" onclick="pageSheetClick(this);"&gt;Twitter&lt;/a&gt;
  &lt;input type="text" id="q" name="q" onkeypress="CheckKey(event);return true;"&gt;
  </code></pre>
  
  <p>To recap, my problem is that when you click on a tab and then click back on the same tab you are then unable to select that tab again. I want to make it so that it isn't possible to click on the selected tab.</p>
  
  <p>I hope you can understand what I am trying to describe.
  Thanks in advance, Callum</p>