Блог

Главная - Вопросы по программированию - Href не переключается на связанный тег div

Href не переключается на связанный тег div

#php #html

Вопрос:

В настоящее время у меня есть <a href> тег, который ссылается на один из моих тегов div, используя href=#work для переключения таблицы на этот конкретный div при нажатии. Но это не меняет моего представления, когда я нажимаю на конкретный тег 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>

Комментарии:

1. создайте скрипку. возможно, ваша страница недостаточно высока, чтобы фактически прокрутить ее вниз.

2. Поэтому он не прокручивается до него, он должен переключить мое представление на него. Прямо сейчас это выглядит так imgur.com/a/y3y94fC и когда я нажимаю на Работу, он должен загрузить это представление и повторно открыть представление свойств.

3. Вы используете Bootstrap? Я собираюсь предположить, что это так. Вам нужно добавить класс nav-link в <a> тег tab. Кроме того, вы можете nav-item <li> также добавить класс в.

Ответ №1:

Это тоже меня достало — при условии, что вы используете 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>

Комментарии:

1. Хорошо, это работает, но изначально я хочу показать личную вкладку как активную, которая на данный момент с этим кодом изначально не активна ни одна из вкладок

2. Просто добавьте active show в качестве классов в nav-link . Довольно просто.

Метки: