2

我有一些代码，当用户单击链接时，JQuery 会将“选定”类添加到该锚点。然后，当用户单击不同的链接时，并非所有链接都以“选定”结束，我尝试使用 .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

4

5 回答 5

2

它的 CSS 将选择器 .selected 更改为....

#heading ul li a.selected {background: #FF0000;}
于 2011-05-20T20:22:32.443 回答
0

它实际上与您的 CSS 有关。如果你在规则后面加上一个 !important ，它会很有效。

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

于 2011-05-20T20:18:59.383 回答
0

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

$('#heading a').click(function () { 
    $('#content').load($(this).attr('href') + ' .content' );
    $(this).addClass('selected').siblings().removeClass('selected');
    return false; 
});
于 2011-05-20T20:29:22.423 回答
-1

我猜是因为你没用过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');
        });
    });
});
于 2011-05-20T20:12:04.100 回答
-1 
$(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; 
});    });
于 2011-05-20T20:16:12.633 回答