Редактирование JavaScript: как отключить класс CSS и добавить другой, когда текущий? - PullRequest
Новая
       0

Редактирование JavaScript: как отключить класс CSS и добавить другой, когда текущий?

1 голос
/ 01 апреля 2012 
<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>

ВОПРОС: как я могу отключить стиль "a.panel", когда ссылка является текущей?прямо сейчас, когда ссылка является текущей, сценарий добавляет к ссылке «выбранный» стиль (см. строку 5), но он по-прежнему сохраняет стиль «a.panel», поскольку он не отключен.

как я могуприменить ТОЛЬКО стиль «выбранный» к текущей ссылке без влияния «a.panel»?

РЕДАКТИРОВАТЬ: ДОПОЛНИТЕЛЬНАЯ ФУНКЦИЯ ЗАПРОШЕНА:

вот некоторые изHTML-код для этого сценария: 

<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>

при загрузке страницы открывается первая панель в этом ползунке, однако ссылка не оформляется как «выбранная» до тех пор, пока она не нажата.как первая ссылка всегда может быть оформлена как "выделенная"?

Ответы [ 2 ]

1 голос
/ 01 апреля 2012

Выполните следующие действия: 

$(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);   
    }

Объяснение: добавлена ​​новая строка, var $aPanel = $("a.panel"); для "кэширования" селектора jQuery в событии готовности DOM, чтобы можно было без опасений добавлять и удалять классы,зная, что одни и те же элементы привязки будут в переменной $aPanel.

1 голос
/ 01 апреля 2012

Вам необходимо удалить стиль "панель" из вашего элемента, например: 

$(this).removeClass('panel')

Но я не уверен, что это именно то, что вам нужно, потому что когда вы нажмете другую панель позже, вызов $('a.panel').removeClass('selected'); не удастся, потому что у него больше нет класса panel.

Почему бы не сделать 2 класса selected и unselected, которые вы различаете в своей таблице стилей. Затем вы можете использовать класс панели для связи с обработчиками событий и другими вещами.

Или измените стиль с selected, чтобы он переопределял свойства из panel, которые вам не нужны.

Редактировать: Изменен ответ, см. Комментарий

...