时间戳

首页 > 解决方案 > Href 不会切换到链接的 div 标签

php - Href 不会切换到链接的 div 标签

问题描述

目前，我有一个标签，它通过在单击时将表格切换到该特定 div 来<a href>引用我的一个 div 标签。href=#work但是当我点击特定的 div 标签时，这并没有改变我的看法。当我出于某种原因单击它时，它只是将我的 URL 从 更改http://localhost/contacts/view/1为。http://localhost/contacts/view/1#work

我的代码：

<ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#personal" role="tab" data-toggle="tab">Personal</a></li>
      <li role="presentation"><a href="#work" role="tab" data-toggle="tab">Work</a></li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade in active" id="personal">
        <table class="table table-hover m-b-0">
          <tbody>
            <tr>
              <td width="20%" class="noborder">Mobile</td>
              <td width="30%" class="noborder active"><i class="fa fa-mobile"></i> <a href="tel:<?php echo $details['personal']['mobile'] ?>" class="text-info"><?php echo $details['personal']['mobile'] ?></a></td>
              <td width="20%" class="noborder">Phone</td>
              <td class="active noborder"><i class="fa fa-phone"></i> <a href="tel:<?php echo $details['personal']['phone'] ?>"  class="text-info"><?php echo $details['personal']['phone'] ?></a></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="work">
        <table class="table table-hover m-b-0">
          <tbody>
            <tr>
              <td width="20%" class="noborder">Mobile</td>
              <td width="30%" class="noborder active"><i class="fa fa-mobile"></i> <a href="tel:<?php echo $details['work']['mobile'] ?>" class="text-info"><?php echo $details['work']['mobile'] ?></a></td>
              <td class="noborder" width="20%">Phone</td>
              <td class="active noborder"><i class="fa fa-phone"></i> <a href="tel:<?php echo $details['work']['phone'] ?>"  class="text-info"><?php echo $details['work']['phone'] ?></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

标签： phphtml

解决方案

这也让我着迷——前提是您使用的是 Bootstrap (4.1.3)。使用标签的标签面板nav，<a>标签需要有类nav-link。这是添加类nav-item和nav-link标记：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<ul class="nav nav-tabs">
  <li role="presentation" class="active nav-item"><a href="#personal" class="nav-link active show" role="tab" data-toggle="tab">Personal</a></li>
  <li role="presentation" class="nav-item"><a href="#work" role="tab" data-toggle="tab" class="nav-link">Work</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade show active" id="personal">
    <table class="table table-hover m-b-0">
      <tbody>
        <tr>
          <td width="20%" class="noborder">Mobile</td>
          <td width="30%" class="noborder active"><i class="fa fa-mobile"></i> <a href="tel:<?php echo $details['personal']['mobile'] ?>" class="text-info">555-555-5555</a></td>
          <td width="20%" class="noborder">Phone</td>
          <td class="active noborder"><i class="fa fa-phone"></i> <a href="tel:<?php echo $details['personal']['phone'] ?>" class="text-info">555-555-5555</a></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div role="tabpanel" class="tab-pane" id="work">
    <table class="table table-hover m-b-0">
      <tbody>
        <tr>
          <td width="20%" class="noborder">Mobile</td>
          <td width="30%" class="noborder active"><i class="fa fa-mobile"></i> <a href="tel:<?php echo $details['personal']['mobile'] ?>" class="text-info">333-333-3333</a></td>
          <td width="20%" class="noborder">Phone</td>
          <td class="active noborder"><i class="fa fa-phone"></i> <a href="tel:<?php echo $details['personal']['phone'] ?>" class="text-info">333-333-3333</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

推荐阅读