Question

我共有4个表，3个隐藏，只有1个可见。我底部还有4个链接，用于控制要显示的内容。例如，如果你点击box-1你得到table-1，box-2你得到table-2，依此类推。使用switch语句我已经让内容淡入淡出，但是当你以不同的顺序选择它们时，它们会全部被剔除。我希望能够点击link-c，获取table-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;
    }
});

Answer 1

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

＆＃13;

$(".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");
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

在锚标记上存储对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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

显示/隐藏类似于分页的内容？

2 个答案: