0

http://jsfiddle.net/bUjx7/31

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<style type="text/css">
.fieldsgame1 {
    display:none;
}
.fieldsgame2 {
    display:none;
}
.fieldsgame3 {
    display:none;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
    $('.tablereplace a').click(function () {
        $('.fieldsmatch').fadeOut(0);
        $('.fieldsgame1').fadeOut(0);
        $('.fieldsgame2').fadeOut(0);
        $('.fieldsgame3').fadeOut(0);
        var region = $(this).attr('data-region');
        $('#' + region).fadeIn(0);
    });
});
</script>

これを私のWordPressヘッダーに入れてください。CSSは問題ありません。HTMLは問題ありません。Javascriptが機能していません。ヘルプ？

4

1 に答える 1

0

何が「機能していない」のかはよくわかりませんが（表示しているFiddleは正常に機能しているため）、コードを少しクリーンアップすることができました。それはもっとDRYであり、速度0は/fadeOutと同じであり、jQuery.data（）を使用して。を取得します。hide()show()data-region

HTML

<div class="tablereplace">
<a data-region="fieldsmatch" href="#">Match</a>
<a data-region="fieldsgame1" href="#">Game 1</a>
<a data-region="fieldsgame2" href="#">Game 2</a>
<a data-region="fieldsgame3" href="#">Game 3</a>
<div id="fieldsmatch" class="fieldsmatch">8-0</div>
<div id="fieldsgame1" class="fieldsgame">7-1</div>
<div id="fieldsgame2" class="fieldsgame">6-2</div>
<div id="fieldsgame3" class="fieldsgame">1-0</div>
</div>

CSS

.fieldsgame {
    display:none;
}

JS

$('.tablereplace a').click(function () {

    $('#fieldsmatch, .fieldsgame').hide();
    var region = $(this).data('region');
    $('#' + region).show();

});

JSFiddle。

===更新===

あなたのコメントに基づいて、私はライブページで次の違いを見つけました：

<a href="#vsfield" data-region="fieldsmatch">Match</a>
<a href="#vsfield" data-region="fieldsgame1">Game 1</a>
<a href="#vsfield" data-region="fieldsgame2">Game 2</a>
<a href="#vsfield" data-region="fieldsgame3">Game 3</a>

<div class="tablereplace">
    <div class="fieldsmatch" id="fieldsmatch">8-0</div>
    <div class="fieldsgame" id="fieldsgame1">7-1</div>
    <div class="fieldsgame" id="fieldsgame2">6-2</div>
    <div class="fieldsgame" id="fieldsgame3">1-0</div>
</div>

指定した機能はセレクターclickに基づいています。.tablereplace aしかし、あなたのサイトでは、の中には何もa見つかりません.tablereplace。言い換えれば、あなたのHTMLは間違っています。

于 2013-03-02T19:41:15.633 に答える