Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery HTML Div Navigation

Tags:

html

jquery

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.

like image 522
Gayan Kalanamith Avatar asked Dec 22 '25 00:12

Gayan Kalanamith


2 Answers

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');
    }
});
like image 70
peduarte Avatar answered Dec 23 '25 16:12

peduarte


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?

like image 35
amelvin Avatar answered Dec 23 '25 16:12

amelvin



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!