SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Mar 2009
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code:
    <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

    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

    Code:
    <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

  2. #2
    SitePoint Addict
    Join Date
    Mar 2009
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;

    Code:
    <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.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Addict
    Join Date
    Mar 2009
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code html4strict:
    <li><a href="http://mysite.com" target="first">Menu 1</a></li>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Addict
    Join Date
    Mar 2009
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    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.
    Last edited by freakystreak; Jan 14, 2011 at 04:36. Reason: added more info

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by freakystreak View Post
    Doesn't work
    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:
    Code javascript:
    tabContainers.filter(this.hash).show();

    After:
    Code javascript:
    tabContainers.filter('#' + this.target).show();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Addict
    Join Date
    Mar 2009
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    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.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by freakystreak View Post
    This line
    Code:
    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?
    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.

    Code javascript:
    $('#' + this.target).show();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •