JQuery шоу скрыть заменить область - PullRequest
1 голос
/ 30 марта 2010

как я могу использовать 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>

Ответы [ 2 ]

2 голосов
/ 30 марта 2010

Если вы поместите содержимое в 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
});

Поскольку у вас есть соглашение с вашими идентификаторами, вы можете использовать его, либо дать вам ссылку на класс, либо обернуть их, например, так:

<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
});
0 голосов
/ 30 марта 2010

Держите содержимое div видимым;вместо этого просто поменяйте содержимое HTML с $('.content').html(strvalue);

...