Href doesn't switch to the linked div tag-CodePudding

Currently I have a <a href> tag that is referencing one of my div tags by using href=#work to switch the table to that particular div when clicked on. But this doesnt change my view when I click on the particular div tag. It just changes my URL from http://localhost/contacts/view/1 to http://localhost/contacts/view/1#work when I click on it for some reason.

My code:

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

CodePudding user response：

This also got me - provided you are using Bootstrap (4.1.3). Tab Panels using the nav tabs, the <a> tags need to have the class nav-link. Here's adding the classes nav-item and nav-link to the markup:

<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" 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>