显示DIV中的内容

Question

我在div元素内使用<a>标记具有两个文本按钮“ 主文件夹”和“ 第二文件夹 ”。

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

Answer 2

这应该为您工作。 只需将这些行添加到您的JS中：

$(".mainFolder").click(function (e) {
    $(this).find("a")[0].click();
});

$(".secondFolder").click(function (e) {
    $(this).find("a")[0].click();
});

工作中的JSFiddle https://jsfiddle.net/Karadjordje1389/h14uv4ww/