文章/答案/技术大牛

发布

社区首页 >问答首页 >显示/隐藏与分页类似的内容？

问显示/隐藏与分页类似的内容？
EN

Stack Overflow用户

提问于 2015-07-15 02:52:52

回答 2查看 510关注 0票数 1

我一共有4张桌子，3张藏着，只有1张可见。我也有4个链接在底部，其中控制哪些内容显示。例如，如果你点击方框-1，你得到表-1，框-2，你得到表-2等等。使用一个开关语句，我已经看到内容在输入和输出中消失，但是当您以不同的顺序选择它们时，它们都会被劫持。我想要能够点击链接-c，获取表-3等(有点像分页的工作方式)。

HTML:

<div class="wrap">
    <table class="table-1">
        <thead>
            <tr>
                <th>Table 1</th>
            </tr>
        </thead>
    </table>

    <table class="table-2">
        <thead>
            <tr>
                <th>Table 2</th>
            </tr>
        </thead>
    </table>

    <table class="table-3">
        <thead>
            <tr>
                <th>Table 3</th>
            </tr>
        </thead>
    </table>

    <table class="table-4">
        <thead>
            <tr>
                <th>Table 4</th>
            </tr>
        </thead>
    </table>

    <div class="links">
         <a class="link link-a active" href="">Table-1</a>
         <a class="link link-b" href="">Table-2</a>
         <a class="link link-c" href="">Table-3</a>
         <a class="link link-d" href="">Table-4</a>
    </div>
</div>

CSS:

.table-2,
.table-3,
.table-4 {
    display: none;
}

JS:

$('.link').on('click', function(e) {
    switch (true) {
        case $(this).hasClass('link-a'):
            $('.table-1').fadeOut(250, function() {
                $('.table-2').fadeIn(150).show();
            });
            break;
        case $(this).hasClass('link-b'):
            $('.table-1').fadeOut(250, function() {
                $('.table-2').fadeIn(150).show();
            });
            break;
        case $(this).hasClass('link-c'):
            $('.table-1').fadeOut(250, function() {
                $('.table-3').fadeIn(150).show();
            });
            break;
        case $(this).hasClass('link-d'):
            $('.table-1').fadeOut(250, function() {
                $('.table-4').fadeIn(150).show();
            });
            break;
    }
});

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-07-15 03:08:54

尝试利用.eq()，.index()，.siblings()

$(".links a").on("click", function(e) {
  e.preventDefault();
  $("table").eq($(this).index()).fadeIn(150).siblings("table").fadeOut(250);
  $(this).addClass("active").siblings("a").removeClass("active");
})

.table-2,
.table-3,
.table-4 {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
    <table class="table-1">
        <thead>
            <tr>
                <th>Table 1</th>
            </tr>
        </thead>
    </table>

    <table class="table-2">
        <thead>
            <tr>
                <th>Table 2</th>
            </tr>
        </thead>
    </table>

    <table class="table-3">
        <thead>
            <tr>
                <th>Table 3</th>
            </tr>
        </thead>
    </table>

    <table class="table-4">
        <thead>
            <tr>
                <th>Table 4</th>
            </tr>
        </thead>
    </table>

    <div class="links">
         <a class="link link-a active" href="#">Table-1</a>
         <a class="link link-b" href="#">Table-2</a>
         <a class="link link-c" href="#">Table-3</a>
         <a class="link link-d" href="#">Table-4</a>
    </div>
</div>

票数 1

Stack Overflow用户

发布于 2015-07-15 03:07:48

在锚标记上，将对表的引用存储在href属性或data-*属性中。

<a class="link link-a active" href="" data-target="table-1">Table-1</a>
<a class="link link-b" href="" data-target="table-2">Table-2</a>

对于每个表，都有如下所示的类表

<table class="table table-1"></table>
<table class="table table-2"></table>

下面的脚本应该这样做

$('.link').on('click', function(e){
  e.preventDefault();
  var target = $(this).data('target');
  $('.table').fadeOut();
  $('.' + target).fadeIn();

  $('.link').removeClass('active');
  $(this).addClass('active');
});

$('.link').on('click', function(e) {
  e.preventDefault();
  var target = $(this).data('target');
  $('.table').fadeOut();
  $('.' + target).fadeIn();

  $('.link').removeClass('active');
  $(this).addClass('active');
});

.table-2,
.table-3,
.table-4 {
  display: none;
}
.active {
  color: red;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="wrap">
    <table class="table table-1">
      <thead>
        <tr>
          <th>Table 1</th>
        </tr>
      </thead>
    </table>

    <table class="table table-2">
      <thead>
        <tr>
          <th>Table 2</th>
        </tr>
      </thead>
    </table>

    <table class="table table-3">
      <thead>
        <tr>
          <th>Table 3</th>
        </tr>
      </thead>
    </table>

    <table class="table table-4">
      <thead>
        <tr>
          <th>Table 4</th>
        </tr>
      </thead>
    </table>

    <div class="links">
      <a class="link link-a active" href="" data-target="table-1">Table-1</a>
      <a class="link link-b" href="" data-target="table-2">Table-2</a>
      <a class="link link-c" href="" data-target="table-3">Table-3</a>
      <a class="link link-d" href="" data-target="table-4">Table-4</a>
    </div>
  </div>
</body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31420711

复制

相似问题

问显示/隐藏与分页类似的内容？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示/隐藏与分页类似的内容？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示/隐藏与分页类似的内容？
EN