使用Javascript/jQuery的

Question

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不起作用。幫幫我？

Answer 1

我不太確定什麼「不工作」（因爲你展示的小提琴工作正常），但我確實設法清理了一下你的代碼。更多DRY,fadeOut速度爲0與hide()/show(),& jQuery.data()相同用於檢索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。

=== UPDATE ===

基於您的評論，我發現下面活頁上的差別：

<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選擇。但是，在您的網站上，.tablereplace內部找不到任何a。換句話說，你的HTML是錯誤的。