Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts

    Use .addClass to to Add CSS Class to List Item

    This is a very basic question, but I'm terrible at javascript. I simply want to determine what page I'm at and if the href matches add a class to the corresponding list item.

    It's hard to find something basic and simple. Everything seems to be way over done. I just want to add a class to an li in a menu exactly like the one below using jquerys .addClass function.

    Code:
    <nav>
      <ul>
        <li><a href="one.html">one</a></li>
        <li><a href="two.html">two</a></li>
        <li><a href="three.html">three</a></li>
        <li><a href="four.html">four</a></li>
        <li><a href="five.html">five</a></li>
      </ul>
    </nav>
    Thanks!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,778
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    It isn’t quite that simple just like that. Unless you have some kind of identification in your document you’d have to retreive the file name from the URL in the address bar and do a test for the string between the period at .html and the last slash before that (so as to get http://example.com/three.html) and add the class to the list item at the respectiv index. Or you work with fragment identifiers (as twitter and Gmail do). But in any case, I find messing with the location object is a lot more complicated than it needs to be for this purpose.

    Why not add the class directly to the HTML in the pages? Or you add an ID to the body and then style the items using that ID (like #three nav li:first-child + li + li {…})?

  • #3
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Quote Originally Posted by VIPStephan View Post
    It isn’t quite that simple just like that. Unless you have some kind of identification in your document you’d have to retreive the file name from the URL in the address bar and do a test for the string between the period at .html and the last slash before that (so as to get http://example.com/three.html) and add the class to the list item at the respectiv index. Or you work with fragment identifiers (as twitter and Gmail do). But in any case, I find messing with the location object is a lot more complicated than it needs to be for this purpose.

    Why not add the class directly to the HTML in the pages? Or you add an ID to the body and then style the items using that ID (like #three nav li:first-child + li + li {…})?

    They aren't really going to be html pages. That was just an example of a similar menu type. i shouldn't have said exactly. I have one menu that each page calls into them. Each of my body tags do have a unique ID. What I was thinking is maybe there would be a way to do something like

    Give each link a unique class and then check to see which link matches the body id and replace that link class with a new id or class
    Last edited by stevenmw; 06-17-2013 at 04:21 PM.
    Thanks!


  •  

    Posting Permissions

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