Navigation issues with jQuery

Question

My problem is as follows:

I have a simple navigation

<ul class="navigation">
                <li class="heading selected">Slider images</li>
                <li><a href="index.php?action=staticpages" title="">Static pages</a></li>
                <li><a href="index.php?action=accomodation" title="">Accomodation</a></li>
                <li><a href="index.php?action=general" title="">General</a></li>
                <li><a href="index.php?action=settings" title="">Settings</a></li>
                <li><a href="index.php?action=dologout" title="">Logout</a></li>
</ul>

and my "not finished" jQuery function:

$('.navigation li a').click(function(e) {
    e.preventDefault();
    $('.navigation li').removeClass('heading selected');
    $(this).parent().toggleClass('heading selected');
});

The li element with class "heading selected" is the default/selected element.

What I want to achieve after clicking on the other li element:

            <li><a href="index.php?action=sliderimages" title="">Slider images</a></li>
            <li class="heading selected">Static pages</li>

in short, remove "heading selected" list class from the default one, assing this class to the newly clicked element, also, add anchor href to the default one, and remove anchor tag from the newly clicked element.

Thanks in advance guys! :)

Answer 1

To make this somewhat more simple to implement, I'd suggest you don't add/remove the a elements from the li, and simply use CSS to style the elements as 'default text', and JS to prevent the default behaviour.

You can use this as a guide:

$('.navigation li a').click(
    function(){
        if ($(this).is('.headingSelected')) {
            return false;
        }
        else {
            $(this)
                .closest('li')
                .siblings()
                .removeClass('headingSelected');
            $(this).closest('li').addClass('headingSelected');
            return false;
        }
    });

JS Fiddle demo.

Note that I've concatenated your 'heading selected' class names into one single, camel-cased, 'headingSelected', also, in the linked demo, I had to guess what the URL of the first link should be. So be aware of that if you should try a direct copy/paste.

---

Edited to address my misconception that this was used for intra-page navigation, or Ajax interaction.

The following seems to work, but will need to be included in all pages that require the functionality (Whether in-line in the head of the document or via a linked js file):

var currentURL = "http://www.yourwebsite.com/index.php?action=staticpages";
var page = currentURL.substring(currentURL.indexOf('=') + 1);

$('.navigation a').each(
    function(i){
        if ($(this).text().toLowerCase().replace(' ','') == page) {
            $(this).closest('li').addClass('headingSelected');
        }
    });

JS Fiddle demo.

If you should use the above, simply ensure that you remove the headingSelected class name from the html, and allow the script to assign the class when it runs.

More concisely, but otherwise exactly the same as the previously edited answer, you could use instead:

var currentURL = "http://www.yourwebsite.com/index.php?action=staticpages";
var page = currentURL.substring(currentURL.indexOf('=') + 1);

$('a[href$="' + page + '"]').closest('li').addClass('headingSelected');

JS Fiddle demo.

References:

• click().
• is().
• closest().
• siblings().
• removeClass().
• addClass().
• substring().
• indexOf().
• each().
• text().
• toLowerCase().
• attrubte$="value" attribute-ends-with selector.

Answer 2

Here you have a solution that will add/remove the a element from the li as David Thomas mentioned.

$('.navigation li a').click(function (e) {
    e.preventDefault();
    $('.navigation li').removeClass('heading selected');
    $('.navigation li').each(function (index) {
        if ($(this).children().size() == 0) {
            $(this).html("<a href='index.php?action=" + $(this).text().replace(' ', '').toLowerCase() + "'>" + $(this).text() + "</a>")
        }
    });
    $(this).parent().html($(this).text());
    $(this).parent().toggleClass('heading selected');
});