javascript - 显示 DIV 中的内容

Question

我有两个文本按钮主文件夹和第二文件夹，使用 <a> div 内的标签元素。

<div class="zf-folder">
   <!-- another div elements -->
      <a href="#mainTab" aria-controls="mainTab" role="tab" data-toggle="tab">Main Folder</a>
   <!-- another div elements -->
</div>

不幸的是，我必须单击文本来移动选项卡，无法使用按钮( div )列来显示内容。

如何不仅可以显示文本中的选项卡内容，还可以通过单击 div 来显示选项卡内容元素。

请帮助我，我在 JSFiddle 上给出了很多代码.

提前致谢

$(document).ready(function() {
  $('table.table').DataTable();
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
  });
});

._tabFolder {
  cursor: pointer;
  position: relative;
}

._tabFolder:hover {
  background-color: rgba(255, 255, 255, 0.2)
}

._tabFolder:active {
  background-color: rgba(29, 33, 41, 1)
}

._itemPosition {
  align-items: center;
  display: flex
}

._sideFolder {
  background-color: none;
  height: 90%;
  left: 0;
  position: absolute;
  top: 2px;
  width: 5px
}



._iconText:hover ._1i5y,
.uiPopover.selected ._1i5y {
  display: block
}

._iconText {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-left: 13px;
}

._iconFolder,
._1i5x,
._1i5w {
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle
}

._iconFolder {
  background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: -437px -21px;
  height: 24px;
  position: relative;
  width: 24px
}

._5bme ._iconFolder {
  background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: -412px -21px
}

._icon-col {
  height: 16px;
  left: 4px;
  position: absolute;
  top: 4px;
  width: 16px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="column-folder">
  <ul class="nav nav-tabs" role="tablist">
  
<!-- *********** MAIN FOLDER BUTTON ************* -->
    <div class="zf-folder">
      <li role="presentation" class="active">
        <div id="tabFolder" class="_tabFolder _itemPosition" role="presentation" style="height: 40px;border-bottom:1px groove; user-select: none;">
          <div class="_sideFolder"></div>
          <div class="_iconText" style="width: 215px">
            <div class="ellipsis">
              <div class="_iconFolder">
                <div class="_icon-col">
                </div>
              </div>
              <a href="#mainTab" aria-controls="mainTab" role="tab" data-toggle="tab">Main Folder</a>
            </div>
          </div>
        </div>
      </li>
    </div>
<!-- *********** MAIN FOLDER BUTTON  ************* -->
    
    
<!-- *********** SECOND FOLDER BUTTON  ************* -->    
    <div class="zf-folder">
      <li role="presentation" class="active">
        <div id="tabFolder" class="_tabFolder _itemPosition" role="presentation" style="height: 40px;border-bottom:1px groove; user-select: none;">
          <div class="_sideFolder"></div>
          <div class="_iconText" style="width: 215px">
            <div class="ellipsis">
              <div class="_iconFolder">
                <div class="_icon-col">
                </div>
              </div>
              <a href="#example1-tab2" aria-controls="example1-tab2" role="tab" data-toggle="tab">Second Folder</a>
            </div>
          </div>
        </div>
      </li>
    </div>
<!-- *********** SECOND FOLDER BUTTON  ************* -->
    
  </ul>
</div> <!-- Zf-Folder -->


<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="mainTab">

    <div class="row">
      <div class="col-md-6">
        <h3>Main Folder</h3>

      </div>
    </div>

    <div class="table-responsive">
      <table id="pendingOffTable" class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Leave Type</th>
            <th>Remarks</th>
            <th>Status</th>
            <th>Operation</th>
          </tr>
        </thead>
        <tbody>
          <tr data-th-each="off : ${pendingOffList}">
            <td data-th-text="${off.user.name}">...</td>
            <td data-th-text="${off.startDate}">...</td>
            <td data-th-text="${off.endDate}">...</td>
            <td data-th-text="${off.leaveType}">...</td>
            <td data-th-text="${off.remarks}">...</td>
            <td data-th-text="${off.status}">...</td>
            <td>
              <input hidden="hidden" name="offId" th:value="${off.id}" />
              <button th:id="${off.id}" class="btn btn-success btn-xs approve-off" type="submit" value="approve">
                <span class="fa fa-check-square-o"></span> Approve
              </button>
              <button th:id="${off.id}" class="btn btn-danger btn-xs reject-off" type="submit" value="reject">
                <span class="fa fa-times"></span> Reject
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div role="tabpanel" class="tab-pane fade in" id="example1-tab2">

    <div class="row">
      <div class="col-md-6">
        <h3>Second Folder</h3>

      </div>
    </div>

    <div class="table-responsive">
      <table id="approvedOffTable" class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Leave Type</th>
            <th>Remarks</th>
            <th>Status</th>
            <th>Operation</th>
          </tr>
        </thead>
        <tbody>
          <tr data-th-each="off : ${approvedOffList}">
            <td data-th-text="${off.user.name}">...</td>
            <td data-th-text="${off.startDate}">...</td>
            <td data-th-text="${off.endDate}">...</td>
            <td data-th-text="${off.leaveType}">...</td>
            <td data-th-text="${off.remarks}">...</td>
            <td data-th-text="${off.status}">...</td>
            <td>
              <input hidden="hidden" name="offId" th:value="${off.id}" />
              <button th:id="${off.id}" class="btn btn-danger btn-xs delete-ocoff" type="submit" value="delete">
                <span class="fa fa-times"></span> Delete
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

Answer 1

您可以在链接内添加跨度:

<a href="#mainTab" aria-controls="mainTab" role="tab" data-toggle="tab">
   Main Folder
      <span class="hyperspan"></span>
</a>

和CSS:

.hyperspan
{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}