JQuery addClass和removeClass问题

发布于 2024-11-08 22:29:33 字数 1838 浏览 5 评论 0原文

我有一些代码，当用户单击链接时，JQuery 会将“selected”类添加到该锚点。然后，当用户单击不同的链接时，并非所有链接都以“选定”结束，我尝试使用 .removeClass 从任何元素中删除这些类，然后再将其添加到单击的元素中。

但是，我遇到了类被删除但没有添加的问题。更奇怪的是..它在 Chrome 中工作得很好，但在 IE9 和 FF4 中只有一个链接添加了一个类（第一个链接，bio）（无论我单击链接的顺序如何）...而 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

原文

I have some code that when a user clicks on a link JQuery adds class 'selected' to that anchor. Then, so that not all links end up with 'selected' as the user clicks on different links, I tried using .removeClass to remove those classes from any elements before adding it to the one clicked.

However, I've run into issues where classes are being removed, but not being added. To make things even stranger.. it works perfectly in Chrome, but in IE9 and FF4 only one link is having a class added (first link, bio) to it (regardless of what order I click links)...And Safari 5.05 doesn't seem to work on any of them.

I tried pasting all of my code into JSFiddle, but I couldn't get it to work correctly in JSlint (I'll post it anyways)..

Here's my 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; 
});    });

Here's part of the 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>

And here's the JSFiddle, although I think I must have things posted wrong (Never used JSFiddle).. http://jsfiddle.net/PhHrX/3/

Any ideas?

Thanks for any help you can throw my way.

Edit:
Here's the complete CSS: http://pastebin.com/g8zLGR76
Here's the complete HTML: http://pastebin.com/CR1Y2595

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

是你 2024-11-15 22:29:33

它是你的 CSS 更改选择器.selected to....

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

Its your CSS change the selector .selected to....

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

回复收藏 0 原文

如梦亦如幻 2024-11-15 22:29:33

它实际上与你的 CSS 有关。如果你在规则后面加上 !important ，它就会正常工作。

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

回复收藏 0 原文

合约呢 2024-11-15 22:29:33

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

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

In the past, I've used the .siblings() selector to accomplish this.

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

回复收藏 0 原文

内心激荡 2024-11-15 22:29:33

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

I'm guessing it's because you haven't used each(), try this:

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

回复收藏 0 原文

云胡 2024-11-15 22:29:33

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

$(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 原文

~没有更多了~