2

ユーザーがリンクをクリックすると、JQuery がそのアンカーに「選択された」クラスを追加するコードがいくつかあります。次に、ユーザーが別のリンクをクリックしたときにすべてのリンクが「選択済み」になるわけではないので、.removeClass を使用してそれらのクラスを要素から削除してから、クリックした要素に追加してみました。

ただし、クラスが削除されているのに追加されていないという問題に遭遇しました。さらに奇妙なことに..Chromeでは完全に機能しますが、IE9とFF4では、クラスが追加されているリンク（最初のリンク、バイオ）が1つだけです（リンクをクリックする順序に関係なく）...そして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

過去に、.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 に答える
0

それは実際にはCSSに関係しています。ルールの後に !important を付けると、うまく機能します。

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

于 2011-05-20T20:18:59.383 に答える
-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 に答える