Question

我已经获得了内容标签，但我对我需要哪个jQuery感到有点困惑。我想要实现的是：

点击淡入文章/隐藏标签内容
点击淡出文章/显示标签内容

（我希望能够点击“关闭”或点击下一个标签删除文章并在标签内容中淡出。

我不确定要使用什么。 .hide()隐藏了所有内容，因此无法重新获取标签内容。

试图隐藏，褪色并使用当前的课程，但没有运气！

无法找到类似的问题，但如果有，请提供链接，以便我可以查看是否可以与我匹配。

感谢您的帮助。

我的例子：

＆＃13;

$('ul.tabs li').click(function() {
    var tab_id = $(this).data('tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $(this).parent().parent().parent().children("#"+tab_id).addClass('current');
});

$('.open-article').click(function() {
    $('.article').show();
    $('.tab-content').hide();
});

$('.close').click(function() {
    $('.article').hide();
});

＆＃13;

.section {
    height: 200px;
    width: 200px;
    background: #ccc;
    display: inline-block;
    text-align: center;
}

.article { 
    background: green;
    width: 40%;
    display: none;
}

ul.tabs {
	margin: 0;
	padding: 0;
	list-style: none;
    background: #ccc;
}

.tab-link {
	background: none;
	color: #fff;
	display: inline-block;
	padding: 10px;
	cursor: pointer;
	font-size: 16px;
  margin: 0 10px 0 0;
}

.tab-content {
	display: none;
	background: #ccc;
}

.tabs .tab-link.current {
	background: #ccc;
}

.tab-content.current {
	display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <nav>
    <ul class="tabs">
      <li class="tab-link current" data-tab="first">
        <a href="#tab-1">One</a>
      </li>
      <li class="tab-link" data-tab="sec">
        <a href="#tab-2">Two</a>
      </li>
    </ul>
  </nav>
  <div id="first" class="tab-content current">
    <p class="open-article">one</p>
  </div>
  <div id="sec" class="tab-content">
    <p class="open-article">two</p>
  </div>
</section>

<article class="article">
  <p class="close">close</p>
  <p>As I move away from the article (either pressing close or the next tab), I want the last active tab to fade back in but with 'close' all I get is hiding everything and clicking the next tab doesn't work.</p>
</article>

＆＃13;

Answer 1

修正：https://codepen.io/anon/pen/vZgVmK

$('ul.tabs li').click(function() {
    var tab_id = $(this).data('tab');

    $('.article').hide();

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $(this).parent().parent().parent().children("#"+tab_id).addClass('current');
    $('.tab-content.current').show();
});

问题是您需要重新显示内容。

最后一行是问题的答案。您需要再次显示当前标签的div。

Answer 2

也许是这样的：

＆＃13;

$('ul.tabs li').on('click', function() {
  var tab_id = $(this).data('tab');

  $('.tab-content')
    .hide() // first just hide all 
    .removeClass('current'); // and remove the class current

  $('#' + tab_id)
    .show() // show the tab 
    .addClass('current'); // add class current to it        
});

$('.open-article').on('click', function() {
  $('.article').show();
  $('.tab-content').hide();
});

$('.close').on('click', function() {
  $('.article').hide();
  $('.tab-content.current').show(); // add this line
});

＆＃13;

.section {
  height: 200px;
  width: 200px;
  background: #ccc;
  display: inline-block;
  text-align: center;
}

.article {
  background: green;
  width: 40%;
  display: none;
}

ul.tabs {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #ccc;
}

.tab-link {
  background: none;
  color: #fff;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
  margin: 0 10px 0 0;
}

.tab-content {
  display: none;
  background: #ccc;
}

.tabs .tab-link.current {
  background: #ccc;
}

.tab-content.current {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <nav>
    <ul class="tabs">
      <li class="tab-link current" data-tab="first">
        <a href="#tab-1">One</a>
      </li>
      <li class="tab-link" data-tab="sec">
        <a href="#tab-2">Two</a>
      </li>
    </ul>
  </nav>
  <div id="first" class="tab-content current">
    <p class="open-article">one</p>
  </div>
  <div id="sec" class="tab-content">
    <p class="open-article">two</p>
  </div>
</section>

<article class="article">
  <p class="close">close</p>
  <p>As I move away from the article (either pressing close or the next tab), I want the last active tab to fade back in but with 'close' all I get is hiding everything and clicking the next tab doesn't work.</p>
</article>

＆＃13;

Answer 3

根据您的要求，这是更新后的代码：

＆＃13;

$('ul.tabs li').click(function() {
  var tab_id = $(this).data('tab');
  $('.article').hide();
  $('ul.tabs li, .tab-content').removeClass('current');
  $('.tab-content').hide();
  $("#" + tab_id).addClass('current').show();
});

$('.open-article').click(function() {
  $('.article').show();
  $('.tab-content').hide();
  $(".current").removeClass('current');
});

$('.close').click(function() {
  $('.article').hide();
});

＆＃13;

.section {
  height: 200px;
  width: 200px;
  background: #ccc;
  display: inline-block;
  text-align: center;
}

.article {
  background: green;
  width: 40%;
  display: none;
}

ul.tabs {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #ccc;
}

.tab-link {
  background: none;
  color: #fff;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
  margin: 0 10px 0 0;
}

.tab-content {
  display: none;
  background: #ccc;
}

.tabs .tab-link.current {
  background: #ccc;
}

.tab-content.current {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <nav>
    <ul class="tabs">
      <li class="tab-link current" data-tab="first">
        <a href="#tab-1">One</a>
      </li>
      <li class="tab-link" data-tab="sec">
        <a href="#tab-2">Two</a>
      </li>
    </ul>
  </nav>
  <div id="first" class="tab-content current">
    <p class="open-article">one</p>
  </div>
  <div id="sec" class="tab-content">
    <p class="open-article">two</p>
  </div>
</section>

<article class="article">
  <p class="close">close</p>
  <p>As I move away from the article (either pressing close or the next tab), I want the last active tab to fade back in but with 'close' all I get is hiding everything and clicking the next tab doesn't work.</p>
</article>

＆＃13;

淡出后淡化上一个元素

3 个答案: