Question

我有一个网站，我想在其中显示两个表中的一个，具体取决于用户选择的标签。我试图使用Bootstrap的类来做到这一点，而不是将Javascript添加到页面。我添加了我认为必要的类，但单击选项卡不会改变屏幕上的任何内容。我错过了什么吗？

以下是代码：

<ul class='nav nav-tabs ticket_tabs'>
  <li class='active'><a data-toggle="tab" href="#all">Assigned Tickets</a></li>
  <li><a date-toggle='tab' href='#open'>Your Tickets</a></li>
</ul>
<div class='tab-content'>
  <div id='all' class='tab-pane fade in active'>
    <div class='table-responsive text-center'>
        <table class='table table-hover' id='myTable'>
          <thead>
            <th>Status</th>
            <th class='text-center'>Ticket #</th>
            <th class='text-center'>Title</th>
            <th class='text-center' style='padding-right: 20px;'>Category</th>
            <th class='text-center' style='padding-right: 20px;'>Priority</th>
            <th class='text-center'>Assigned By</th>
            <th class='text-center'>Created</th>
            <th class='text-center'>Updated</th>
          </thead>
          <tbody>
            <?php foreach ($assignedTickets as $ticket): ?>
            <tr class='clickable-row' data-href = "<?php echo (site_url()); ?>ticketing/editTicket/<?php echo $ticket->ticketId ?>">
              <td><div class='status_view text-center'<?php if ($ticket->open == 1): ?>style='background-color: #29F223; font-size:14px;'>Open<?php else: ?>style='background-color: #FF0E18; font-size:14px;' ?>Closed<?php endif ?></td>
              <td><?php echo $ticket->ticketId ?></td>
              <td class='text-center'><?php echo $ticket->headline ?></td>
              <td class='text-center' style='padding-right: 20px;'><?php echo $ticket->category ?></td>
              <td class='text-center' style='padding-right: 20px;'><?php echo $ticket->priority ?></td>
              <td class='text-center'><?php echo $ticket->assigned ?></td>
              <td class='text-center'><?php echo $ticket->dateOpened ?></td>
              <td class='text-center'><?php echo $ticket->lastUpdated ?></td>
            </tr>
            <?php endforeach ?>
          </tbody>
        </table>
    </div>
  </div>
  <div id='open' class="tab-pane fade">
    <h1>Coming Soon</h1>
  </div>
</div>

提前感谢您的帮助！

Answer 1

你有拼写错误。你写道：

datE-toggle="tab"

你需要写：

datA-toggle="tab"

https://jsfiddle.net/evepe2vk/所有代码都可以正常运行

标签不起作用的引导表

1 个答案: