Question

我使用this tutorial来隐藏/显示DIV。不幸的是由于某些原因它不再起作用（我同时在我的代码中修改了一些东西）......你看到问题的来源吗？ jsfiddle：http://jsfiddle.net/Grek/C8B8g/ 我认为下面的两个脚本可能存在冲突：

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);
})

Answer 1

你有一些问题在继续。您在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 DEMO

Answer 2

我假设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);        
    });
})

隐藏/显示JS中的DIV不再起作用 - 脚本之间可能存在冲突

2 个答案: