0

このチュートリアルを使用して、 DIVを非表示/表示しました。残念ながら、何らかの理由で機能しなくなりました（その間にコードのいくつかの変更を行いました）...問題の原因がわかりますか？jsfiddle：http ://jsfiddle.net/Grek/C8B8g/ 以下の2つのスクリプトの間でおそらく競合があると思います。

function showonlyone(thechosenone) {
    $('.textzone').each(function(index) {
        if ($(this).attr("id") == thechosenone) {
            $(this).show(200);
        }
        else {
            $(this).hide(200);
        }
    });
}

$('.activity-title a').click(function(){
  $('.textzone').fadeOut(2000);
  var region = $(this).attr('data-region');    
  $('#' + region).fadeIn(2000);
})​
4

2 に答える 2

2

いくつか問題が発生しています。あなたはdata-sourceあなたの<a>要素に欠けています。それらの「region-source」は、いくつかの機能を使用してhref内に隠されています。私はそれを入れて取り外しました、data-sourceそして今それはすべてうまくいきます。

あなたはこのようなことをしたいです：

$('.activity-title a').click(function(){
    var region = $(this).attr('data-region'); 
    $('.textzone:visible').fadeOut(2000, function () { 
        $('#' + region).fadeIn(2000);
    });

    return false; // stops href from happening    
})​;

// HTML Structured like so:
<div class="source-title-box"><span class="activity-title">
    <a href="#" data-region="source-region">Our region</a></span>
</div>

jsFiddleデモ

于 2012-08-13T21:03:36.150 に答える
0

jsFiddleのマークアップから、すべてのリンク（.activity-title a）には。があると思います.textzone。onclickこれらのアンカーからイベントを削除しました。このように最初のリンクは最初のリンクに対応します.textzone：

<div id="source-container">
    <div id="source-region" class="textzone">
      <p><span class="activity-title">Interacting with the nature</span></p>
      <p>blablabla</p>
    </div>
    <div id="source-oursource" class="textzone">
        <p><span class="activity-title">Pure, pristine, and sustainable source</span></p>
        <p>blablabla</p>
    </div>
    <div class="source-title-box"><span class="activity-title"><a href="#">Our region</a></span></div>
    <div class="source-title-box"><span class="activity-title"><a href="#">Our source</a></span></div>
</div>​

次に、スクリプトを使用して、indexクリックされたリンクを使用して、表示する適切なものを決定します.textzone。

var textZones = $(".textzone");
var anchors = $('.activity-title a').click(function(e){
    e.preventDefault();
    var index = anchors.index(this);
    textZones.filter(":visible").fadeOut(2000, null, function() {
        textZones.eq(index).fadeIn(2000);        
    });
})​
于 2012-08-13T21:12:12.267 に答える