Question

我有一些代码，当用户点击链接时，JQuery会将“selected”类添加到该锚点。然后，当用户点击不同的链接时，并非所有链接都以'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/

有什么想法吗？

感谢您提供任何帮助，您可以自由选择。

编辑：这是完整的CSS：http://pastebin.com/g8zLGR76 这是完整的HTML：http://pastebin.com/CR1Y2595

Answer 1

你的CSS改变选择器。选择....

#heading ul li a.selected {background: #FF0000;}

Answer 2

我猜是因为你没有使用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');
        });
    });
});

Answer 3

它实际上与你的CSS有关。如果你在规则之后放了一个！重要的话，它会很有效。

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

Answer 4

过去，我使用.siblings()选择器来完成此任务。

$('#heading a').click(function () { 
    $('#content').load($(this).attr('href') + ' .content' );
    $(this).addClass('selected').siblings().removeClass('selected');
    return false; 
});

Answer 5

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

JQuery addClass和removeClass问题

5 个答案: