CODEWITHSUNDEEP
javascriptcssnavigationbar
Brian Trost
Brian Trost

Reputation: 29

Active Link on javascript menu to work on parent link not just child link

I am trying to finish up my navigation for my site. I'm attaching the jsfiddle code to show you what code I have now. My problem is my child links become gray when they are suppose to but, I want to make the top level link when I click on that gray as well. The way I have my pages labeled is like this

Page1
  Page1a
  Page1b
Page2
  Page2
.
.
.
ETC.

I need Page1 and Page2 to turn gray like the sublevels do. If anyone can help me with this I would really appreciate it. Thank you for your time.

http://jsfiddle.net/gUmYP/

<script type="text/javascript">
    $('#body').ready(function(){
            var URL = location.pathname.split("/");

            URL = URL[URL.length-1];
            //<![CDATA[
            for(var i = 0; i < 11; i++){ // 4 = number of items, if you add more increase it, make number 1 larger than total items.
                if ((URL.indexOf(i) != -1) && (!$('#i'+i).is(':visible'))) {
                    $('#nav ul:visible').slideUp('normal');
                    $('#i'+i).slideDown(0);
                    $('#i'+i)
                        .find('li')
                        .each( function() {
                            var current = $(this).find('a')[0];
                            if (current.href == window.location.href)
                                current.style.backgroundColor = "#ccc";

                            current.style.color = "#006";
                        });
                }
            }
        });
</script>

Previous question was here, but was never answered fully: Highlight Links on Navigation

Unfortunately none of the answers below have solved my issue, some have made it so the parent link now highlights, but it makes the other features not work correctly. I need the menu to still highlight in yellow when I hover over everything, I need the submenus to still be the light blue when not active, and I need all active links(parent or child) to show the gray highlight that they are the active link. Does anyone know the solution to fix all those issues?

Upvotes: 0

Views: 643

Answers (1)

Jefferson Henrique C. Soares
Jefferson Henrique C. Soares

Reputation: 968

Look at this JSFiddle.

$('#nav li a').click(
   (...)

   // Here I removed the "active" class from all siblings "li"
   $(this).parent().siblings().removeClass("active");

   (...)

   // Here I add the "active" class to this "li"
   $(this).parent().addClass("active");

   (...)
)

Note 1: The new JSFiddle

Upvotes: 2

Related Questions