First thing, if you're loading your JS just before the end of the <body>
tag, you don't need to wrap it in a document.ready listener. The DOM will
already be built when the renderer reaches the end of the tag, so the
document.ready is superfluous.
Second, make sure your IDs on the <li>s have been wrapped in quotation
marks (" "), unless you've correctly declared the HTML5 doctype. Do you get
any console errors when you run your piece of jQuery?
If those things fail, then you can grab the URL of your current page with
JavaScript document.location.href, then use that to target the appropriate
<li>. Open up your developer tools in whatever browser you're using, and
type document.location.href into the console. You'll get your current pages
URL returned. The alternative is to hard-code an addClass at the bottom of
each page, like you've done in your example.
On Tuesday, 31 July 2012 17:02:51 UTC+1, fled wrote:
>
> Thanks Joyrex.
>
> I could effectively do something like that with php, but I would like to
> use a simplier JQuery approach.
> Any idea?
>
> 2012/7/31 Joyrex <[email protected]>
>
>> I'm not a PHP programmer myself, but if you have functions in PHP that
>> tells you what the current page is, you can have it match the menu item's
>> URL (I'm assuming you're populating the menu dynamically). In ColdFusion,
>> this is how I do it:
>>
>> <li <cfif #GetFileFromPath(GetBaseTemplatePath())# EQ
>> #ListLast(relativeURL,"/")#>class="active"</cfif>><a
>> href="/#relativeURL#">#menuName#</a></li>
>>
>> What this is saying is, "if the current page (file) matches the URL, add
>> the "class='active'" text to the LI tag. The text surrounded by # are CFML
>> variables and functions. I'm outputting each LI dynamically so each time it
>> creates an LI, it does this evaluation to see whether or not to put the
>> active class on the LI in question.
>>
>> Hope that helps!
>>
>>
>> On Tuesday, July 31, 2012 8:53:17 AM UTC-5, fled wrote:
>>>
>>> Hello to all.
>>>
>>> I'm using the navbar to navigate through my site. From what I see, I
>>> need to put the navbar definition on all my pages with the "active class"
>>> active on the selected page. If I'm right, it is redundant... What I'm
>>> trying to do is to create a header.php file which would contain the navbar.
>>> This file would then be included "include("header.php")". All of this
>>> currently works. The only problem I have is, how to activate the List item
>>> representing the displayed page?
>>>
>>> Here is the code:
>>>
>>> =========header.php===========
>>> <!--NavBar -->
>>> <div class="navbar navbar-fixed-top">
>>> <div class="navbar-inner">
>>> <div class="container">
>>> <a class="btn btn-navbar" data-toggle="collapse"
>>> data-target=".nav-collapse">
>>> <span class="icon-bar"></span>
>>> <span class="icon-bar"></span>
>>> <span class="icon-bar"></span>
>>> </a>
>>> <a class="brand" href="index.php">Mysite</a>
>>> <div class="nav-collapse">
>>> <ul id=ul_nav class="nav">
>>> <li id=li_home><a href="index.php">Home</a></li>
>>> <li id=li_about><a href="about.php">About</a></**li>
>>> <li id=li_cont><a href="contact.php">Contact</a>**</li>
>>> </ul>
>>> </div>
>>> </div>
>>> </div>
>>> </div>
>>> <!--NavBar end -->
>>>
>>> ====== about.php =================
>>> I've tried this in this file without success
>>>
>>> <body>
>>> <?php
>>> include("_header.php");
>>> ?>
>>> ...
>>>
>>> <!--At the end of the document -->
>>> <script type="text/javascript">
>>> $(document).ready(function(){
>>> $('#li_about').addClass('**active') ;
>>> });
>>> </script>
>>> </body>
>>> </html>
>>> Any help would be greatly appreciated.
>>>
>>> Thanks.
>>>
>>>
>
>
> --
> *Francois Leduc*
>
