JQuery HTML Div Navigation

Question

The folowing code shows my div implementation for a side menu.

<div class="top_link">
    <h3><a href="/dashboard/" class="dash_board_link">Dashboard</a></h3>
</div>
<div id="accordion" class="accordion_menu">
    <h3><a href="#section1">Hits</a></h3>
    <div class="content">
        <a href="/dailyhits/">Daily Hits</a>
        <a href="/tophundredurls/?page=1">Top 100 URL</a>
    </div>
</div>
<div class="bottom_link">
    <h3><a href="/userwatchlist">Watch Lists</a></h3>
</div>
<div class="bottom_link">
    <h3><a href="/twitterinsights">Twitter Insights</a></h3>
</div>
<div class="bottom_link selected">
    <h3><a href="/managedomain"> Manage Domain </a></h3>
</div>

Using jQuery I want to read the current URL and trim it to the format which is specified in the href attribute and if there's match I want to add the selected part of the particular div element to the div class="xxx select". In order to do this I added the following jQuery code:

$(document).ready(function () {
    var pathname = window.location.pathname;
});

I dont know how to proceed further because um so new to jQuery.

peduarte · Accepted Answer · 2011-11-24 11:07:40Z

2

Haven't tried it yet but, something along these lings should work:

var pathname = window.location.pathname;
var pathPart = pathname.slice('.com/', '/'); // assuming this is the end of your url
$('#navigation a').click(function(){
    var url = $(this).attr('href');
    $('#navigation a').removeClass('active');
    if ( pathPart == url ) {
        $(this).addClass('active');
    }
});

answered Nov 24, 2011 at 11:07

peduarte

1,6773 gold badges16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wheresrhys Over a year ago

One note of caution though - in ie (up to version 8 I think) the href attribute includes the full url, including host, even if it's not what you type in/set using jQuery. Accounting for this can be tricky (although recent releases of jQuery might have taken care of it). You should probably do some kind of feature detection in your init scripts (create a dummy hidden link, set its url to "/" and then check if the url returned by .attr("href") is equal to "/" or not)

amelvin · Accepted Answer · 2011-11-24 11:01:37Z

2

Using jquery basically involves selecting something on the screen (for example a div) and then performing an action on it (eg replacing its text).

So your jquery needs to do something with the pathname var you've set up.

Also your jquery isn't quite valid as your missing a couple of characters from the end:

$(document).ready(function () { 
  var pathname = window.location.pathname; 
  // select something here and use the pathname, eg:
  $(".bottom_link").append(pathname);
});

But from your description I'm not really sure what you want to select or what you want to do with it - but hopefully this will get you started?

answered Nov 24, 2011 at 11:01

amelvin

9,0714 gold badges40 silver badges59 bronze badges

1 Comment

Kalanamith Over a year ago

okay in every div element there is an <a href> element . i want to do traverse kind of a thing to match the current url's value with ahref inside value . Thank you

Collectives™ on Stack Overflow

JQuery HTML Div Navigation

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related