Question

I’m attempting to create a toggle that assigns a class and adds the id to the target href. I also want the ability to remove the contents of the tags variable from the href without removing the rest of the link.

My Issue:
Well, when I click a link, it correctly assigns it to the href, but when I click and already active link, it removes the class fine, but does not remove what was added to the href. For instance, if I click “construction” I get http://bshoults.com/construction& which is correct, but when I click it again, I get http://bshoults.com/construction&construction& instead of http://bshoults.com. The following code removes the entire href and not just the construction& portion.

http://jsfiddle.net/tewvd/1/

$('.tags li a').click(function() {

    // set variable to get the href of .button
    var _href = $('.button').attr("href");

    // if has class 'selected'
    if ($(this).hasClass('selected')) {

        // remove class 'selected'
        $(this).removeClass('selected');

        // set variable to get tag from id of item
        var tags = ($(this).attr('id') + "&");

        // create link based on href and tags
        $('.button').removeAttr("href", tags);
    }
    // otherwise give it a class of 'selected'
    else {
        $(this).addClass('selected');

        // set variable to get tag from id of item
        var tags = ($(this).attr('id') + "&");

        // create link based on href and tags
        $('.button').attr("href", _href + tags);
    }
});

Here’s the HTML:

<ul class="tags">
    <li><a href="javascript: void(0)" id="construction">construction</a></li>
    <li><a href="javascript: void(0)" id="saturday">saturday</a></li>
    <li><a href="javascript: void(0)" id="singles">singles</a></li>
    <li><a href="javascript: void(0)" id="sunday+morning">sunday morning</a></li>
    <li><a href="javascript: void(0)" id="teaching">teaching</a></li>
</ul>
<p><a href="http://bshoults.com/" class="button">Next Step &rarr;</a></p>
​

​

Answer 1

removeAttr() doesn’t replace attribute text. I just removes the whole attribute.

Where you have…

// create link based on href and tags
$('.button').removeAttr("href", tags);

…you need to have

$('.button').attr('href', $('.button').attr('href').replace(tags, ''));