Question

<script>
    $(document).ready(function() {
        $('a.panel').click(function () {
            $('a.panel').removeClass('selected');
            $(this).addClass('selected');
            current = $(this);
            $('#slidewrapper').scrollTo($(this).attr('href'), 300);     
            return false;
            });
        $(window).resize(function () {
            resizePanel();
            });
        });
    function resizePanel() {
        width = $(window).width();
        height = $(window).height();
        mask_width = width * $('.item').length;
        $('#debug').html(width  + ' ' + height + ' ' + mask_width);
        $('#slidewrapper, .item').css({width: width, height: height});
        $('#mask').css({width: mask_width, height: height});
        $('#slidewrapper').scrollTo($('a.selected').attr('href'), 0);   
        }
</script>

QUESTION: how can i disable “a.panel” styling when the link is current? right now, when the link is current the script adds “selected” styling to the link (see line 5) but it still retains the styling of “a.panel” because it is not disabled.

how can i apply ONLY the styling of “selected” to a current link without the influence of “a.panel”?

EDIT: ADDITIONAL FEATURE REQUESTED:

here is some of the html for this script:

<a href="#item1" class="panel">item1</a>
<a href="#item2" class="panel">item2</a>
<a href="#item3" class="panel">item3</a>

<div id="slidewrapper">
    <div id="mask">
        <div id="item1" class="item">
            <a name="item1"></a>
            <div class="content">item1</div>
        </div>
        <div id="item2" class="item">
            <a name="item2"></a>
            <div class="content">item2</div>
        </div>
        <div id="item3" class="item">
            <a name="item3"></a>
            <div class="content">item3</div>
        </div>
    </div>
</div>

when the page loads, the first pane in this slider is open, however, the link is not styled as “selected” until it’s clicked on. how can the first link always be styled as “selected”?

Answer 1

Do as follows:

$(document).ready(function() {
    var $aPanel = $('a.panel');
    $aPanel.click(function () {
        $aPanel.removeClass('selected');
        $(this).addClass('selected');
        $(this).removeClass('panel');
        current = $(this);
        $('#slidewrapper').scrollTo($(this).attr('href'), 300);     
        return false;
        });
    $(window).resize(function () {
        resizePanel();
        });
    });
function resizePanel() {
    width = $(window).width();
    height = $(window).height();
    mask_width = width * $('.item').length;
    $('#debug').html(width  + ' ' + height + ' ' + mask_width);
    $('#slidewrapper, .item').css({width: width, height: height});
    $('#mask').css({width: mask_width, height: height});
    $('#slidewrapper').scrollTo($('a.selected').attr('href'), 0);   
    }

Explanation: added a new line, var $aPanel = $("a.panel"); to “cache” the jQuery selector at the DOM ready event, so that you can add and remove classes without fear, knowing that the same anchor elements will be in the $aPanel variable.