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>元素。它们的“区域源”隐藏在具有某些功能的 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 回答