CODEWITHSUNDEEP
phpjqueryhtml
Dragonman86
Dragonman86

Reputation: 95

Problems adding class using jquery and PHP

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.

Upvotes: 0

Views: 50

Answers (1)

kishor10d
kishor10d

Reputation: 553

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.

Upvotes: 1

Related Questions