Problems adding class using jquery and PHP

Question

To start off, if this has already been answered please point me to the right area as I have not yet been able to find it.

I have built a web sit which contains 4+ pages and I am using the php code include(filename.php); where filename.php is the name of the php file containing my header navigation. I also have a class named "current" which, before adding the include() statement was manually placed on each link within the navigation bar. I am trying to do this using jQuery as I have had to remove this class within the linked php file. I have tried writing the code as such:

<body>
<?php
    $file_included = true;
    // common code used in every page
    if ($file_included == true) {
        include("header.php");
    } else {
        header("Location:remedies.php");
    }
?>
<script>
    $(document).ready(function() {
        $("#about").addClass("current");
    });
</script>

however when I test this site on my server, the "current" class does not move to the currently selected link. The code contained within the linked .php file is as follows:

<div id="title">
<header>
    <img src="images/Dragon-Catcher-Web-Logo.jpg" alt="Dragon Catcher Web Design Logo" id="design" style="padding-right:  15%; padding-left: 1%; padding-top: 1%;"/>
    <span style="text-align: center;">Dragon Catcher Herbs</span>
</header>
<nav>
    <ul id="navlist">
        <li><a href="index.php" id="home">Home</a></li>
        <li><a href="about.php" id="about">About Us</a></li>
        <li><a href="contact.php" id="contact">Contact Us</a></li>
        <li><a href="beginner.php" id="beginner">Beginner Herbalists</a></li>
        <li><a href="herbs.php" id="herb">Herb List</a></li>
        <li><a href="remedies.php" id="remedy">Remedies</a></li>
        <li><a href="recommend.php" id="user">User Recommended</a></li>
    </ul>
</nav>

not sure where I went wrong with my code but any and all help would be great.

@madalinivascu: The jQuery code is being added on each individual page in an attempt to remind the user which page they are currently looking at. In the case of the supplied code this was pulled from the "About Us" page — Dragonman86
– Dragonman86, Commented Dec 19, 2016 at 6:17
why do you do that man :( why don't you just add the class manually to the links?? — madalinivascu
– madalinivascu, Commented Dec 19, 2016 at 6:18
@madalinivascu: I am using a php script to add the nav bar to each page. if I add the class manually to each link than they would show up as "current" on all pages. — Dragonman86
– Dragonman86, Commented Dec 19, 2016 at 8:00

kishor10d · Accepted Answer · 2016-12-19 06:28:08Z

1

I used your code and make two separate files as below:

question.php

<html>
<head>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
</head>
<body>
<?php
    include("header.php");
?>
<script>
    $(document).ready(function() {
        $("#about").addClass("current");
    });
</script>
</body>
</html>

header.php

<nav>
    <ul id="navlist">
        <li><a href="index.php" id="home">Home</a></li>
        <li><a href="about.php" id="about">About Us</a></li>
        <li><a href="contact.php" id="contact">Contact Us</a></li>
        <li><a href="beginner.php" id="beginner">Beginner Herbalists</a></li>
        <li><a href="herbs.php" id="herb">Herb List</a></li>
        <li><a href="remedies.php" id="remedy">Remedies</a></li>
        <li><a href="recommend.php" id="user">User Recommended</a></li>
    </ul>
</nav>

And css class current applies on #about. I think you didn't included jquery.js in your code. Just try this code.

answered Dec 19, 2016 at 6:28

kishor10d

5536 silver badges25 bronze badges

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

1 Comment

Dragonman86 Over a year ago

Thank you. I knew that I must have been forgetting something or typing something in wrong. This fixed the problem completely

Collectives™ on Stack Overflow

Problems adding class using jquery and PHP

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related