1

我如何使用 jQuery 来显示/隐藏相同的 div 区域...本质上是交换内容？

这是我到目前为止所拥有的，我不知道如何隐藏以前的内容并将其替换为新内容：

       <script type="text/javascript">
    $(document).ready(function(){

    $('.content').hide();

    $('a').click(function(){
    $('.content').show('slow');
    });

    //then hide previous content

    });

    </script>

<a href="#" id="a-link">A</a>
<a href="#" id="b-link">B</a>

  <div class="start-content" id="a">
  content here
  </div>

  <div class="content" id="b">
  content here
  </div>
4

2 回答 2

2

如果将内容包装在 div 中，这会更容易一些，如下所示：

<div id="wrap">
  <div class="start-content" id="a">
  content here
  </div>

  <div class="content" id="b">
  content here
  </div>
</div>

这在 jQuery 中：

$('a').click(function(){
  $("#wrap > div").hide(); //hide previous
  $('.content').show('slow'); //show what's clicked on
});

由于您的 ID 有一个约定，因此您可以使用它，或者给您链接一个类，或者也将它们包装起来，如下所示：

<div id="links">
  <a href="#" id="a-link">A</a>
  <a href="#" id="b-link">B</a>
</div>
<div id="wrap">
  <div class="start-content" id="a">
  content here
  </div>    
  <div class="content" id="b">
  content here
  </div>
</div>

然后，您可以对所有链接使用单个事件处理程序，如下所示：

$('#wap > div:not(.start-content)').hide(); //Initial hide
$("#links a").click(function() {
  $("#wrap > div").hide(); //hide previous
  var id = $(this).attr("id").replace('-link', ''); //matching id
  $('#' + id).show('slow'); //show what's clicked on
});
于 2010-03-30T15:19:34.070 回答
0

保持内容 div 可见；相反，只需将 HTML 内容替换为 $('.content').html(strvalue);

于 2010-03-30T15:17:36.893 回答