Use url instead of # for link to div in jquery

I have a jquery navigation menu which works but only shows the div by using an anchor tag and hash

<li><a href="#first">Menu 1</a></li>

I want to have the click to go to a genuine URL rather than having it go nowhere. I have tried setting it to a <li> element in my function but it won’t show the div.

here’s my code


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
                $(function () {
                        var tabContainers = $('div.tabs > div');
                        tabContainers.hide()
						

					   $('div.tabs ul.tabNavigation a').mouseenter(function () {
                                tabContainers.hide();
                                tabContainers.filter(this.hash).show();
                                $('div.tabs ul.tabNavigation a').removeClass('selected');
                                $(this).addClass('selected');
                                return false;
        				});	
						
						$('div.nav').mouseleave(function () {
							$('div.nav').hide();
					
						});
						
						$('div.tabs').mouseleave(function () {
							$('div.nav').hide();
				
						});
                });
				
        </script>
<div class="wrap">
    <div class="tabs">
        <ul class="tabNavigation">
            <li><a href="#first">Menu 1</a></li>
            <li><a href="#second">Menu 2</a></li>
            <li><a href="#third">Menu 3</a></li>
	    <li><a href="#fourth">Menu 4</a></li>
            <li><a href="#fifth">Menu 5</a></li>
        </ul>
        <div id="first" class="nav">
			<span>nav 1</span> <span>nav 2</span> <span>nav 3</span>
        </div>
        <div id="second" class="nav">
            <span>nav 4</span> <span>nav 5</span> <span>nav 6</span>
        </div>
        <div id="third" class="nav">
            <span>nav 7</span> <span>nav 8</span> <span>nav 9</span>
        </div>
		<div id="fourth" class="nav">
            <span>nav 10</span> <span>nav 11</span> <span>nav 12</span>
        </div>
		<div id="fifth" class="nav">
            <span>nav 13</span> <span>nav 14</span> <span>nav 15</span>
        </div>
    </div>
</div>	

I would like to have my <li> links like this

<li><a href="http://mysite.com">Menu 1</a></li>

Can anyone advise on how to achieve this.

The original code was take from off an example on the web and I have adjusted it slightly

Ok, maybe my explanation is not clear.

Ive been doing some reading about this and it appears you can but hashes inside your url. Such as;

<a href="test.html#first">Menu 1</a>

I want to take out the #first and be left with with the ‘test.html’ link. This should happen when i hover over the tab that will in turn show the div and give me the choice to click the tab to go to ‘test.html’ and show the div.

I hope this makes more sense.

Not sure what it is you are trying to do but that link goes to the tag with id=“first” in the test.html page. No script required as the HTML already links to the div.

I would like the link to the tag to also have a url attached to it so that when the mouse enters the tab two things happen;

  1. the div that is linked, #first, displays via the jquery script
  2. a url contained in the link with the # goes to the url specified: www.mysite.co.uk

the link hopefully should complete two tasks

Does that make more sense as to what i want to achieve

Thanks

I’ll try and reword that in a manner that might be easier to solve.

You want:

  1. the hover event of the link to show the #first section
  2. the click event of the link to navigate to the url, without the #first fragment

If so, combining both together in the one link is mor likely to lead to confusion.
Instead, you could use a separate but related link attribute to hold one of them, such as the rel attribute.


<li><a href="http://mysite.com" target="first">Menu 1</a></li>

Doesn’t work and doesn’t help that I am a total noob with javascript and jquery. So please excuse if what i’m describing is a bit vague.

By using this code:


<li><a href="http://mysite.com" target="first">Menu 1</a></li>

The link works fine and does indeed go to the url I specify but by hovering over the tab ‘menu 1’ my div which has an id of ‘first’ which displays a sub menu with additional links doesn’t show.

What I need is for the user to have 2 options.

1.An option to show the hidden div, using mouseenter via jquery, to show sub menu links

and 2.Click the tab to go to a specified URL. eg http://www.mysite.co.uk

I hope this explains a bit more of what I’m trying to achieve. Thanks for the help so far guys.

As a side note I have been looking at basic jquery tutorials of tab menus and every one uses the same principle of using <a href=“#tab”> to link the div and show it. Although it works, it doesn’t go anywhere just links to that initial page.I need the <a href> to link to another page but still display the div. Maybe my script doesn’t allow this.

because you only have the HTML code suggestion.

The JavaScript to make use of that HTML suggestion is to change this.hash to ‘#’ + this.target

For example:

Before:


tabContainers.filter(this.hash).show();

After:


tabContainers.filter('#' + this.target).show();

wow, thank you so much, works perfect now i added the changes to the script. really is easy when you know how.

Could I ask if this is right so I understand what is happening:

This line

tabContainers.filter('#' + this.target).show();

filters anything with a # and then adds the target which is ‘first’ so you get #first which then shows the div?

Many thanks again, I have spent over a week trying to get this working.

A more direct way is to not even use tabContainers of the filter, since the identifier is actually a page-wide unique identifer.

That is to say, this code achieves the same as the above.


$('#' + this.target).show();