How can I change the href requirement of an anchor tag to rel so that I can use href to open links?

Question

Hi,

I spent all my afternoon building a navigation that changes the slideshow pictures on hovering a menu item in the navigation. After I finished, I realized that the menu item's tag makes use of href attribute to correspond changes in the slideshow. I need the href tag to have a link so that the menu can open a page as its meant to be.. I dont' want to use onClick as it is rendered useless if the user disables javascript.

Please help me out!

My code: Header.

<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript">
$(window).load(function(){
 $("#tabs").tabs({
   event: 'mousedelay'
  }).delegate('ul.ui-tabs-nav li a', 'mouseover', function() {
      clearTimeout($(this).closest('.ui-tabs').data('timeout'));
      $(this).closest('.ui-tabs').data('timeout', setTimeout($.proxy(function() {
   $(this).trigger('mousedelay');
    }, this), 00));
  });
});
</script>

The HTML code

<div id="tabs">
 <div id="services_nav">
  <ul>
   <li><a id="leftnav_menu1" href="#tabs-1"></a></li>"
   <li><a id="leftnav_menu2" href="#tabs-2"></a></li>
   <li><a id="leftnav_menu3" href="#tabs-3"></a></li>
   <li><a id="leftnav_menu4" href="#tabs-4"></a></li>
   <li><a id="leftnav_menu5" href="#tabs-5"></a></li>
   <li><a id="leftnav_menu6" href="#tabs-6"></a></li>
   <li><a id="leftnav_menu7" href="#tabs-7"></a></li>
  </ul>
 </div>


  <div id="tabs-1">
   <img src="images/slideshow/1.jpg">
  </div>
  <div id="tabs-2">
   <img src="images/slideshow/2.jpg">
  </div>
  <div id="tabs-3">
   <img src="images/slideshow/1.jpg">
  </div>
  <div id="tabs-4">
   <img src="images/slideshow/2.jpg">
  </div>    
  <div id="tabs-5">
   <img src="images/slideshow/1.jpg">
  </div>    
  <div id="tabs-6">
   <img src="images/slideshow/2.jpg">
  </div>    
  <div id="tabs-7">
   <img src="images/slideshow/1.jpg">
  </div> 

</div>

Can you please help me to set href in the list to be used to open pages.

Thanks very much!

Answer 1

Sorry forgot to format the the code for the head : It is as follows:

        <script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(window).load(function(){
        $("#tabs").tabs({
          event: 'mousedelay'
            }).delegate('ul.ui-tabs-nav li a', 'mouseover', function() {
                clearTimeout($(this).closest('.ui-tabs').data('timeout'));
                $(this).closest('.ui-tabs').data('timeout', setTimeout($.proxy(function() {
                $(this).trigger('mousedelay');
              }, this), 00));
            });
    });
    </script>