Question

到目前为止，我有两个项目的导航栏。这可能有更多的项目，但现在我只需要两个。当用户打开页面时，我想加载导航栏中第一个项目的内容。每个项目都有单独的表格。所以在加载第一个表时应该在页面上加载。如果用户点击我希望在屏幕上显示的其他链接。我不确定这个问题的最佳方法/解决方案是什么。这是我的HTML代码：

<div class="container">
   <section class="mainBox">
        <h3>Home Page</h3>
        <nav class="xNavigation">
            <a href="#" id="tab1" onClick="openTab('tab1')">Info 1</a> |
            <a href="#" id="tab2" onClick="openTab('tab2')">Info 2</a> |
        </nav>
        <div id="dataContainer">
           //Here I want to load the tables
        </div>
    </section>
</div>

我已经在页面上构建了表格：

<table class="tab1Class" id="tab1Tbl">
    <caption>Info 1</caption>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>DOB</th>
    </tr>
    <tr>
        <td><input type="text" name="lname" id="lname" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="fname" id="fname" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="dob" id="dob" value="" size="10" maxlength="10" readonly /></td>
    </tr>
</table>

<table class="tab2Class" id="tab2Tbl">
    <caption>Info 2</caption>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>DOB</th>
    </tr>
    <tr>
        <td><input type="text" name="lname2" id="lname2" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="fname2" id="fname2" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="dob2" id="dob2" value="" size="10" maxlength="10" readonly /></td>
    </tr>
</table>

在页面加载时我想加载第一个表。之后基于用户选择我想加载第二个表。在这种情况下，我不确定是应该从容器中删除表还是设置为隐藏？

这是我的想法，但是没有用：

function openTab(tblID){
        $('.xNavigation a').each(function(i){
            if(this.id == tblID){
                $('#'+tblID).show();
            }else{
              $(this.id).hide();
            }
        });
    }

如果有人可以帮助解决这个问题，请告诉我。

Answer 1

不是为表添加唯一id，而是可以为它们提供与导航项的ID匹配的data-id，并根据该项进行切换：

JS Fiddle

简化JS

$('.xNavigation a').on('click', function() {
  var id = $(this).prop('id');
  $('#dataContainer > table[data-id=' + id + ']').show();
  $('#dataContainer > table:not([data-id=' + id + '])').hide();
});

首先将两个表放在它们所属的位置，但隐藏不希望显示的表格，如：

CSS

#dataContainer > table:not([data-id="tab1"]) {
  display: none;
}

HTML

<div class="container">
  <section class="mainBox">
    <h3>Home Page</h3>
    <nav class="xNavigation">
      <a href="#" id="tab1">Info 1</a> |
      <a href="#" id="tab2">Info 2</a> |
    </nav>
    <div id="dataContainer">
      <table class="tab1Class" data-id="tab1">
        <caption>Info 1</caption>
        <tr>
          <th>Last Name</th>
          <th>First Name</th>
          <th>DOB</th>
        </tr>
        <tr>
          <td>
            <input type="text" name="lname" id="lname" value="" size="20" maxlength="30" readonly />
          </td>
          <td>
            <input type="text" name="fname" id="fname" value="" size="20" maxlength="30" readonly />
          </td>
          <td>
            <input type="text" name="dob" id="dob" value="" size="10" maxlength="10" readonly />
          </td>
        </tr>
      </table>

      <table class="tab2Class" data-id="tab2">
        <caption>Info 2</caption>
        <tr>
          <th>Last Name</th>
          <th>First Name</th>
          <th>DOB</th>
        </tr>
        <tr>
          <td>
            <input type="text" name="lname2" id="lname2" value="" size="20" maxlength="30" readonly />
          </td>
          <td>
            <input type="text" name="fname2" id="fname2" value="" size="20" maxlength="30" readonly />
          </td>
          <td>
            <input type="text" name="dob2" id="dob2" value="" size="10" maxlength="10" readonly />
          </td>
        </tr>
      </table>
    </div>
  </section>
</div>

Answer 2

将您的表放在div #dataContainer中。无需在那里加载它们，只需显示/隐藏您想要的那些。
为所有表提供css类'tabTable'，并为第一个表添加一个名为'active'的额外类
每个表都有一个唯一的ID，所以这里没什么可做的，但重要的是他们有一个。
使用css隐藏tabTable类的所有元素
提供所有链接，这些链接将导致tab更改tabLink的类和data-opens =“[id-of-table]”的属性，其中[id-of-table]是唯一的id表打开。
使用以下JS
这是JSfiddle

JS

$(document).ready(function () {
  $(document).on('click', '.xNavigation a.tabLink', function (evt) {
    evt.preventDefault();
    var opens = $(evt.target).data('opens');
    $('.tabTable').removeClass('active');
    var el = $('#' + opens).addClass('active');
  });
});

CSS

.tabTable { display: none }
.tabTable.active {display: table} /* Cause we're using tables not divs */

HTML

<div class="container">
   <section class="mainBox">
      <h3>Home Page</h3>
      <nav class="xNavigation">
          <a href="#" class="tabLink" id="tab1" data-opens="tab1Tbl">Info 1</a> |
          <a href="#" class="tabLink" id="tab2" data-opens="tab2Tbl">Info 2</a> |
      </nav>

      <div id="dataContainer">
<table class="tabTable active" id="tab1Tbl">
    <caption>Info 1</caption>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>DOB</th>
    </tr>
    <tr>
        <td><input type="text" name="lname" id="lname" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="fname" id="fname" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="dob" id="dob" value="" size="10" maxlength="10" readonly /></td>
    </tr>
</table>

<table class="tabTable" id="tab2Tbl">
    <caption>Info 2</caption>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>DOB</th>
    </tr>
    <tr>
        <td><input type="text" name="lname2" id="lname2" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="fname2" id="fname2" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="dob2" id="dob2" value="" size="10" maxlength="10" readonly /></td>
    </tr>
</table>
      </div>
    </section>
</div>

Answer 3

1。）将两个表放在隐藏的div中 2.）使用table-id（tab1Tbl或tab2Tbl）调用openTab。

openTab（tabId）：
1.）如果#dataContainer中有一个表，则将他移动到隐藏的div 2.）从隐藏的div获取带有#tabId的表格并将其移至#dataContainer。

如何在div容器中加载HTML表？ JQuery的/ JavaScript的

3 个答案: