How to set class of clicked <a>

Question

2.00/5 (1 vote)

See more:

Hello folks;

I have been trying to find solution for the past day but have not been successful.

I have a php web page with three(3) sections namely top navigation, side navition and content. All the section except content is static.

The content is based on the link user chooses from set of links in side navigation.

I use <php include=""> to load the appropriate html into the content section. The page works loads and everything else works EXCEPT ONE THING.

I used jQuery to set the clicked class to "cur" so that I the clicked link would change as per CSS rules I have defined in my CSS file. I have shown the jQuery script and html/php structure below.

When I click side navigation page, the content sectiion loads correctly but the clicked link does not get set to cur

$(function() {
	$('#side-link a').click(function() {
          $('#side-link a').removeClass('cur');
	   $(this).addClass('cur');
	});
});

HTML

XML

<!DOCTYPE html>
<html>
<head>
<title>Website : Gallery</title>
...
<script type="text/javascript">
    $(function() {
        $('#side-link a').click(function() {
            $('#side-link a').removeClass('cur');
            $(this).addClass('cur');
        });
    });
</script>

</head>
<body>
    <header id="hd_wrapper" class="hd_wrap">
        <div id="nav_div">
        ....

        </div>
    </header>
    ...
    <section id="main1">
        <section id ="main_content">
            <section id ="contents">
                <section id="news_pub">
                    <aside class ="contact_gal">

                            <div id="side-link">
                            <h2>Categories</h2>
                                    <ul>
                                        <li><a  href="gallery.php?content=gal1" class="cur" name="content" value="gal1"> Example1 </a></li>
                                        <li><a href="gallery.php?content=gal2" class="" name="content" value="gal2"> Example2 </a></li>
                                        <li><a href="gallery.php?content=gal3" class="" name="content" value="gal3"> Example3  </a></li>
                                        <li><a href="gallery.php?content=gal4" class="" name="content" value="gal4"> Example4 </a></li>
                                        <li><a href="gallery.php?content=gal5" class="" name="content" value="gal5"> Example5 </a></li>
                                        <li><a href="gallery.php?content=gal6" class="" name="content" value="gal6"> Example6 </a></li>
                                        <li><a href="gallery.php?content=gal7" class="" name="content" value="gal7"> Example7 </a></li>
                                    </ul>
                            </div>
                            <div id="o_uqiness">
                                ...
                            </div>
                    </aside>
                    <section id="n_pub2">
                        <div>
                            <?php
                                if (isset($_GET['content'])){
                                    switch ($_GET['content']) {
                                    case 'gal2':
                                        include('gal2.html');
                                        break;
                                    case 'gal3':
                                        include('gal3.html');
                                        break;
                                    case 'gal4':
                                        include('gal4.html');
                                        break;
                                    case 'gal5':
                                        include('gal5.html');
                                        break;
                                    case 'gal6':
                                        include('gal6.html');
                                        break;
                                    case 'gal7':
                                        include('gal7.html');
                                        break;
                                    case 'gal1':
                                    include('gal1.html');
                                        break;
                                    default:
                                        include('gal1.html');
                                        break;
                                    }
                                }
                                else
                                //no link has been clicked
                                include('gal1.html');
                            ?>
                        </div>
                    </section>
                </section>
            </section>
        </section>
    </section>
    <footer id=ft>
        <section id="ft_container">
            <p>Ex. &copy;
            <script type="text/javascript">
                var today=new Date();
                document.write(today.getFullYear());
            </script>
            <noscript>2014</noscript>
            </p>
        </section>
    </footer>
</body>
</html>

Posted 10-Aug-15 14:14pm

noblepaulaziz

Updated 11-Aug-15 15:20pm

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 10-Aug-15 22:18pm

You actually add the class "cur". Maybe you just fail to see it. Also, removing the class is pointless here: you remove it and add again or visa versa.
—SA

noblepaulaziz 11-Aug-15 21:12pm

Thanks chief for your response

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2015-08-10T16:25:00

Solution 1

First of all, it is totally unrelated to PHP.

Now, you code makes no practical sense at all, because it does nothing. In first code fragment, you add the class "cur" and immediately remove it. So, the class is never added.
In second fragment, you do the opposite, so the class is never removed.

Note that it's nasty to not to reuse '#side-link a'. Your "this" is the wrapper of the same element object as '#side-link a'. Overall, your code is very dirty.

—SA

Posted 10-Aug-15 16:25pm

Sergey Alexandrovich Kryukov

Updated 10-Aug-15 16:27pm

v2

Comments

noblepaulaziz 11-Aug-15 21:10pm

Thanks so much for four response.
First of all, I provided the wrong fragment of code for Javascript section. I never mearnt two sets of code for the scrpt section. I expirement with several fragments and forgot to clean up when I posting. I deeply appologise for that.

The fragment I used that did not work is shown below.

$(function() {
$('#side-link a').click(function() {
$('#side-link a').removeClass('cur');
$(this).addClass('cur');
});
});

Sergey Alexandrovich Kryukov 11-Aug-15 21:14pm

All right, I already explained your problem with this code fragment. You remove class and then add it to the same element. It makes no sense.
$(this) and $('#side-link a') wrap the same element.
—SA

noblepaulaziz 11-Aug-15 21:37pm

Thanks chief for prompt response. What do you suggest I do?

Sergey Alexandrovich Kryukov 11-Aug-15 22:08pm

I have no idea what you want to achieve. Well, add class on one event, remove class on some other event...
—SA

noblepaulaziz 11-Aug-15 22:29pm

Snr. I am in deed grateful for your help.

I want the the link user clicks to be styled differently by setting its class to 'cur'. I have set the appropriate CSS rules in CSS file for cur class.

Sergey Alexandrovich Kryukov 11-Aug-15 23:35pm

If you do it, the very first click will change style permanently. If this is what you need, remove "removeClass", it does nothing.
—SA

noblepaulaziz 12-Aug-15 4:54am

Thank you for your suggestion. That is not what I want.

Sergey Alexandrovich Kryukov 12-Aug-15 10:29am

You never told us what you really want.
—SA

noblepaulaziz 12-Aug-15 5:44am

I removed "removeClass" as you suggested but the class does not get set permanently. The class gets set monentarily and gets removed as soon as the content(i.e, the php section)section loads.

Sergey Alexandrovich Kryukov 12-Aug-15 10:29am

If you only set the class, what removes it? It is either set permanently, or there is a piece of code where it is removed.
—SA