Calling a JS script in HTML

Question

Hello there I have this code and I want to display active links in purple. I have that in a js file however, does not seem to work as expected. I am not sure where exactly I am doing wrong. Everything else is working properly but when you clink a link it fails to highlight to purple as is in the css. I have provided the necessary code only, Anyone?

html

<html>
  <head>
    <link href="site.css" rel="stylesheet">   <script src="color.js"></script>
  </head>
  <body>
    <div class="nav-container">
      <ul class="navigation-menu">
        <li><a href='start.php'>Home</a></li>
        <li><a href='pay.php'>C2B Payments</a> </li>
        <li><a href='sms.php'>C2B SMS</a></li>
        <li><a href='#'>B2C Payments</a>
          <ul>
            <li><a href="getbtc.php"> B2C Payments</a></li>
            <li><a href="payment.php"> Make Payments</a></li>
          </ul>
        </li>
        <li><a href='bsms.php'>B2C SMS</a></li>
        <li><a href='index.php'>Log Out</a></li>
      </ul>
    </div>
  </body>
</html>

css (site.css)

.navigation-menu li.active a {
  background-color: purple;
  color:#fff;
}
.navigation-menu li ul {
  display: none;
}

.navigation-menu li a:hover{
  background-color:black;
  color: white;
}
.navigation-menu li a.active {
  background-color: purple;
  color:#fff;
}

javascript (color.js)

$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
  });
});

<link href="site.css" rel="stylesheet"> for CSS and <script src="color.js"></script> for JS are the links in HTML file above — user6464928
– user6464928, Commented Jun 26, 2016 at 15:39
The reason why it happening is because the link takes you to a different page which makes the CSS and jQuery start all over again — KANAYO AUGUSTIN UG
– KANAYO AUGUSTIN UG, Commented Jun 26, 2016 at 15:41

Quentin · Accepted Answer · 2016-06-26 15:39:55Z

4

You have two problems.

First, you haven't included jQuery on the page, so when the JS runs, it throws an error because $ isn't defined.

If you were to fix then this would be the order of events:

The link is clicked
The JavaScript starts running
The JavaScript modifies the DOM of the page
The JavaScript finishes
The browser follows the link
The page with the modified DOM is discarded
A new page is loaded

… and the new page hasn't been modified by the JavaScript.

Put the active class in the HTML of the new page.

answered Jun 26, 2016 at 15:39

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mosh Feu Over a year ago

Put the active class in the HTML of the new page but this is a totally different code because you don't know who the link you clicked on it. So you try to figure it out by the location.href for example ($('[href=' + location.href + ']')).

user6464928 Over a year ago

(jsfiddle.net/rv6adud7/6) worked here but honestly don't what you mean. @MoshFeu

Quentin Over a year ago

@MoshFeu — I said "in the HTML". You don't need to figure it out with JavaScript.

Mosh Feu Over a year ago

@Quentin if the html file is static. In the most of the cases that is not the situation.. But it's not relevant to the question..

Quentin Over a year ago

@Bob — That's the same URL. It has CSS. It has JS. Unlike the code in your question it has jQuery. It has no HTML.

|

Akash · Accepted Answer · 2016-06-26 16:35:53Z

You have to check the page url and match href in the element and add class active to respective element

You have to include jQuery Lib

Replace test.html page2.html by the name of page u have

$(document).ready(function() {
    var pageURL = $(location).attr('href'),
        pageName= [ /test.html/, /page2.html/, /page3.html/],
        links = $('a'),
        LinksToActive;

    for( var i=0; i < $(pageName).size(); i++){
            for( var j=0; j < $(links).size(); j++){
                var str = $(links[j]).attr('href');
                if( 'str:contains(pageName[i])' ){
                    LinksToActive = $(links[j]);
                    break;
                }
                else{
                    continue
                }
            }
    }
    $(LinksToActive).addClass('active');

    });

Change/ Add page name in pageName variable nad this script just before closing of body tag

Collectives™ on Stack Overflow

Calling a JS script in HTML

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related