использование jquery для изменения видимости div с вложенным контентом, onclick - PullRequest
Новая
       33

использование jquery для изменения видимости div с вложенным контентом, onclick

3 голосов
/ 18 февраля 2010

У меня есть список ссылок.При нажатии на одну из ссылок я хотел бы изменить видимость элемента div, связанного с ним.Мой HTML выглядит следующим образом: 

<div id="tab">
<ul>
<li id="tab1" class="active"><a href="#">Link 1</a></li>
<li id="tab2"><a href="#">Link 2</a></li>
<li id="tab3"><a href="#">Link 3</a></li>
<li id="tab4"><a href="#">Link 4</a></li>
</ul>
</div>

<div id="content1"><div class="nestedDiv">Content Here</div></div>
<div id="content2"><div class="nestedDiv">Content Here</div></div>
<div id="content3"><div class="nestedDiv">Content Here</div></div>
<div id="content4"><div class="nestedDiv">Content Here</div></div>

Я пытался использовать примеры, которые я нашел здесь: Как вы меняете DIVs при наведении мыши?(jquery?) , но он не работает из-за вложенных div.

Любые идеи о том, как я могу заставить это работать таким образом, чтобы весь контент в данном div, включая другие div, отображалсянажмите?Я также хотел бы сохранить первый div в активном состоянии при первом открытии страницы ... изменить активный вид выбранного li ... но я еще не пытался заняться этим.

Любой вклад приветствуется.Спасибо!

Спасибо!

1 Ответ

7 голосов
/ 18 февраля 2010

Добавить класс = "контент" на каждый контент div 

<style type="text/css">
.content
{
    display: none;
}
</style>

<script type="text/javascript">

$(document).ready(function() {

   $("#tab a").click(function() {

      //reset
      $(".content").hide();
      $("#tab .active").removeClass("active");

      //act
      $(this).addClass("active")
      var id = $(this).closest("li").attr("id").replace("tab","");
      $("#content" + id).show();
   });

});
</script>
...