Question

我在相关问题中看到这个问题很多，但是与这些例子相比，我的需求似乎非常简单，遗憾的是我在js上仍然太新，不知道要删除什么......所以冒着风险做那个，我会问我的问题......

我正在尝试根据按下的按钮切换框中的div内容。现在我使用animatedcollapse.toggle函数工作，但它看起来不太好。我希望用下一个按钮上的基本淡入点击和淡入新内容来替换它。

基本理念：

<div>
<ul>
<li><a href="this will fade in the first_div"></li>
<li><a href="this will fade in the second_div"></li>
<li><a href="this will fade in the third_div"></li>
</ul>
<div class="first_container">
 <ul>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
 </ul>
</div>
<div class="second_container">
 <ul>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
 </ul>
</div>
<div class="third_container">
 <ul>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
 </ul>
</div>
</div>

我已经完成了动画崩溃的所有工作，但这对于这种情况来说只是一个难看的效果，所以我想改变它。

谢谢！乔尔

Answer 1

乔尔，我想我明白你想要什么。 this look对吗？在下面的代码中，我还使用了一个约定，您可以将js附加到HTML上的class属性，这样您就可以不同地设置JS位的样式。如果JS被禁用，则所有三个选项卡将按顺序显示。但是，只要启用了JS，您的代码就会根据需要显示。

你可以通过根据孩子的最高身高动态设置#animators div的高度来改善这一点，但它变得越来越复杂了！

我改变了你的HTML（用于测试和功能。）：

<div>
  <ul>
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
  </ul>
  <div id="animators">
    <div class="container">
     <ul>
      <li>stuff1</li>
      <li>stuff1</li>
      <li>stuff1</li>
     </ul>
    </div>
    <div class="container">
     <ul>
      <li>stuff2</li>
      <li>stuff2</li>
      <li>stuff2</li>
     </ul>
    </div>
    <div class="container">
     <ul>
      <li>stuff3</li>
      <li>stuff3</li>
      <li>stuff3</li>
     </ul>
    </div>
  </div>
</div>

将此添加到您的CSS：

.js #animators { position: relative; height: 100px}
.js #animators div.container { position: absolute; left: 0; top: 0 }

并使用此JavaScript：

<script type="text/javascript">
  document.documentElement.className += " js"; // Add js class to the HTML element
  $(function(){
    var $containers = $("#animators > div").hide();

    $('ul li a').each(function(i,el){
      var idx = i;
      $(this).click(function(e){
        var $target = $containers.filter(':eq(' + idx + ')');
        // Fade out visible div
        if($containers.filter(':visible').not($target).length){
          $containers.filter(':visible').fadeOut();
        }
        // Fade in new div if not already showing
        $target.not(':visible').fadeIn();
        e.preventDefault();
      })
    })
  });
</script>

编辑以下是fadesOut 然后 fadesIn的替代JavaScript块：

<script type="text/javascript">
  document.documentElement.className += " js"; // Add js class to the HTML element
  $(function(){
    var $containers = $("#animators > div").hide();

    $('ul li a').each(function(i,el){
      var idx = i;
      $(this).click(function(e){
        var $target = $containers.filter(':eq(' + idx + ')');
        // Fade out visible div
        if($containers.filter(':visible').not($target).length){
          $containers.filter(':visible').fadeOut(1000, function(){
            $target.not(':visible').fadeIn(1000);
          });
        } else {
          $target.not(':visible').fadeIn(1000);
        }

        e.preventDefault();
      })
    })
  });
</script>

Answer 2

看起来切换支持speed setting ...也许会更优雅？

Answer 3

JQuery fade out - http://docs.jquery.com/Effects/fadeOut怎么样，然后你的回调才会淡出？

..我刚刚在评论中看到了你的链接，这正是他们在CSS技巧上所做的。你有更具体的问题吗？

<强>更新可见类指的是可见的div ......没有测试过，但它应该是正确的

$('.first_container').click(function(){
    $('.visible').fadeOut(3000,function(){
                this.removeClass('visible');
        $('.first_container').addClass('visible');
        $('.first_container').fadeIn(3000);
    });
})

这是引用first_container的代码....你可以从那里开始

Answer 4

如果我理解你的问题，这可能会对你有所帮助

<div id="LoadMe2"><h3>Please select what to edit!</h3></div>
<script>
$('a').click(function() {
  $('#LoadMe2').load($(this).attr('href'));

  return false;
});
</script>

和html可以像

<a href="abc.php" style="text-decoration:none"><input type="button" value="edit Header menu"></a>

修改

抱歉，这可以帮助您从这些页面中获取内容并显示它。像其他人一样保留这篇文章可能需要这个

使用jquery单击替换div内容

4 个答案: