Проблемы JQuery addClass и removeClass - PullRequest
Новая
       4

Проблемы JQuery addClass и removeClass

2 голосов
/ 21 мая 2011

У меня есть некоторый код, который, когда пользователь нажимает на ссылку, JQuery добавляет класс «выбранный» к этой привязке. Затем, чтобы не все ссылки заканчивались «selected», когда пользователь нажимает на разные ссылки, я попытался использовать .removeClass, чтобы удалить эти классы из любых элементов перед добавлением их к одному из них.

Однако я столкнулся с проблемами, когда классы удаляются, но не добавляются. Чтобы сделать вещи еще более странными ... в Chrome он отлично работает, но в IE9 и FF4 к нему добавляется только одна ссылка (первая ссылка, био) (независимо от того, в каком порядке я нажимаю ссылки) ... А Safari 5.05 не похоже, не работает ни на одном из них.

Я попытался вставить весь свой код в JSFiddle, но не смог заставить его работать правильно в JSlint (я все равно опубликую его) ..

Вот мой JQuery: 

$(document).ready(function(){
$('#content').load('bio.html .content'); // fill #content when page loads
$('#heading a').click(function(){ 
    $('#content').load( $(this).attr('href') + ' .content' );
    $('#heading li a').removeClass('selected');
    $(this).addClass('selected');
    return false; 
});    });

Вот часть HTML: 

<body>
    <div id="heading" class="transparent">
        <ul>
            <li><a href="bio.html">Bio</a></li>
            <li><a href="resume.html">Resume</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
        <h1>Test1</h1>
        <h3>Test2</h3>
    </div>
    <div id="content" class="transparent">
    </div>
    <div id="portfolio" class="transparent">
        <p>Portfolio examples will go here.</p>
    </div>
    <div id="footer" class="transparent"><h2>Test3</h2></div>
</body>

А вот JSFiddle, хотя я думаю, что у меня должны быть неправильные сообщения (Никогда не использовал JSFiddle) .. http://jsfiddle.net/PhHrX/3/

Есть идеи?

Спасибо за любую помощь, вы можете бросить меня.

Edit: Вот полный CSS: http://pastebin.com/g8zLGR76 Вот полный HTML-код: http://pastebin.com/CR1Y2595

Ответы [ 5 ]

2 голосов
/ 21 мая 2011

Ваш CSS меняет селектор. Выбрано на .... 

#heading ul li a.selected {background: #FF0000;}
0 голосов
/ 21 мая 2011

Раньше для этого я использовал селектор .siblings(). 

$('#heading a').click(function () { 
    $('#content').load($(this).attr('href') + ' .content' );
    $(this).addClass('selected').siblings().removeClass('selected');
    return false; 
});
0 голосов
/ 21 мая 2011 
$(document).ready(function(){
$('#content').load('bio.html .content'); // fill #content when page loads
$('#heading a').click(function(){ 
    $('#content').load( $(this).attr('href') + ' .content' );
    $('#heading li a').removeClass('selected');
   setTimeout(function() { $(this).addClass('selected'); }, 200);
    return false; 
});    });
0 голосов
/ 21 мая 2011

это на самом деле связано с вашим CSS.если вы ставите! важный после правила, он работает щедро.

http://jsfiddle.net/PhHrX/10/

0 голосов
/ 21 мая 2011

Полагаю, это потому, что вы не использовали each(), попробуйте это: 

$(function(){
    $('#content').load('bio.html .content'); // fill #content when page loads
    $('#heading li').each(function() {
        $('a', this).click(function(e){
            e.preventDefault();
            $('#content').load( $(this).attr('href') + ' .content' );
            $('#heading li a').removeClass('selected');
            $(this).addClass('selected');
        });
    });
});
...