5

jsfiddle http://jsfiddle.net/C8B8g/7/でわかるように、「地域」と「ソース」の2つのボタン（= 2 div）があります。各divはマウスオーバーで強調表示されます（青い背景）（stackoverflowの貢献者のおかげで、私はまだJSで非常に悪いです）。

ユーザーはこれらがボタンであることに実際には気付いていないことに気付いたので、私がやりたいのは、「私たちの地域」というテキストを含む最初のDIVをデフォルトで青い背景で強調表示し、白に戻すことです。 「私たちのソース」というテキストを含む他のdivがクリックされたときの背景（この場合、「私たちのソース」の背景は青に変わります）。CSSで「current」を使用していくつかのテストを行いましたが、成功しませんでした...

4

5 に答える 5

6

これを試してください: 更新: ここでは jsFiddle が動作しています。

$('.activity-title a:first').css({'background-color':'#f00','color':'#fff'});
//for setting first button highlighted by default,
//don't forgot to define document.ready before this

$('.activity-title a').click(function() {
    var region = $(this).attr('data-region');

    $('.activity-title a').css({'background-color':'#fff','color':'#467FD9'});
    $(this).css({'background-color':'#f00','color':'#fff'});

    $('.textzone:visible').stop().fadeOut(500, function () {
    //don't forgot to add stop() for preventing repeat click conflict
        $('#' + region).fadeIn(500);
    });

    return false;

});​
于 2012-08-15T08:58:44.730 に答える
5

選択したdivのスタイルを追加

.source-selected {
    background-color:#00F;
}

このクラスをデフォルトのdivに追加します。

この行をクリックハンドラーに追加します（更新）

if(!$(this).closest('.source-title-box').hasClass('source-selected'))
{
    $('.source-title-box').toggleClass('source-selected');
}

更新されたフィドルを試してください：

http://jsfiddle.net/dmvcQ/1

于 2012-08-15T09:04:19.537 に答える
3

あなたのコードに対処したい部分があったので、回答を投稿することにしました。

まずreturn false;、最後に a を実行する代わりに、jQueryevent.preventDefault();関数を使用できます。最終結果は基本的に同じですが、このようにすると、他のコードを実行する前に、jQuery を使用してアンカーに最初から何もしないように指示できます。

私の更新されたJavascriptコード:

$('.source-title-box a').click(function(event) {

    // Stop the default anchor behaviour
    event.preventDefault(); 

    // Lets check if the clicked link is already active
    // And if it is active, don't let them click it!
    if($(this).closest('div').hasClass('active')) {
        return false;   
    }

    // Now lets remove any active classes that exist
    $('.active').toggleClass('active');

    // And apply an active class to the clicked buttons
    // parent div
    $(this).closest('div').toggleClass('active');

    var region = $(this).attr('data-region');

    $('.textzone:visible').fadeOut(500, function () {
        $('#' + region).fadeIn(500);
    });
});​

私が追加したCSS：

.active {
    background-color:#467FD9;
    color:#fff;   

}
.active a {
    cursor:default;  /* Don't show the hand cursor */
    color:#fff;  
}

作業例:

http://jsfiddle.net/dmvcQ/3/

現在の HTML マークアップが他の目的を念頭に置いているかどうかはわかりませんが、現在のスタイルと機能は と でラップする必要がないだけで実現でき<a href="#" data-region="source-region">Our region</a>ます。<div><span>

たとえば、アンカー タグのみを含む同じコードを次に示します: http://jsfiddle.net/dmvcQ/7/

回答に関してご不明な点がございましたら、お知らせください。

于 2012-08-15T09:43:29.557 に答える
1 
try with this exemple:
<div id="target">
 Test1
</div>
<div id="other">
  Test2
</div>

<script>
$("#target").click(function() {
  $('#target').css({'background':'blue'});
 $('#other').css({'background':'white'});
});

$("#other").click(function() {
  $('#other').css({'background':'blue'});
  $('#target').css({'background':'white'});
});
</script>
于 2012-08-15T09:00:35.933 に答える
1

または、主にjqueryで行うことができます

実際の例:

http://jsfiddle.net/razmig/GhbjS/

$('.activity-title a:first').css({
    "background-color": "#467FD9",
    "color": "#fff"
});


$('.activity-title a').mouseover(function() {
    $('.activity-title a').css({
        "background-color": "#fff",
        "color": "#467FD9"
    });
    $(this).css({
        "background-color": "#467FD9",
        "color": "#fff"
    });

});

$('.activity-title a').click(function() {
    var region = $(this).attr('data-region');

    $('.textzone:visible').fadeOut(2000, function() {
        $('#' + region).fadeIn(2000);
    });

    return false;

});
于 2012-08-15T09:51:07.170 に答える