CODEWITHSUNDEEP
jqueryhtml
Kalanamith
Kalanamith

Reputation: 20688

JQuery HTML Div Navigation

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.

Upvotes: 3

Views: 702

Answers (2)

peduarte
peduarte

Reputation: 1677

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');
    }
});

Upvotes: 2

amelvin
amelvin

Reputation: 9061

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?

Upvotes: 2

Related Questions