Bootstrap 4 tabs without anchor (href) tag

Question

How to create bootstrap 4 tabs without anchor (href) tag? I tried using data-target but no luck.

<ul class="nav nav-tabs" id="createNewTemplate" role="tablist">
    <li class="nav-item">
      <a class="nav-link" id="available-tab" data-toggle="tab" href="#available" role="tab" aria-controls="available" aria-selected="true">Available</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" id="new-tab" data-toggle="tab" href="#new" role="tab" aria-controls="new" aria-selected="false">New</a>
    </li>
  </ul>
  <div class="tab-content" id="newTemplateContent">
    <div class="tab-pane fade" id="available" role="tabpanel" aria-labelledby="available-tab">Available content...</div>
    <div class="tab-pane fade show active" id="new" role="tabpanel" aria-labelledby="new-tab">
      New content...
    </div>
  </div>

Answer 1

Normally it should work with data-target . You can check out example 2 for this.

You can give the href property only the " # " and element ID to " data-target ".

Example

 body { padding: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> <body> <ul class="nav nav-tabs" id="createNewTemplate" role="tablist"> <li class="nav-item"> <a class="nav-link" id="available-tab" data-toggle="tab" href="#" data-target="#available" role="tab" aria-controls="available" aria-selected="true">Available</a> </li> <li class="nav-item"> <a class="nav-link active" id="new-tab" data-toggle="tab" href="#" data-target="#new" role="tab" aria-controls="new" aria-selected="false">New</a> </li> </ul> <div class="tab-content" id="newTemplateContent"> <div class="tab-pane fade" id="available" role="tabpanel" aria-labelledby="available-tab">Available content...</div> <div class="tab-pane fade show active" id="new" role="tabpanel" aria-labelledby="new-tab"> New content... </div> </div> </body>

Without <a> element.

Example

 body { padding: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> <body> <ul class="nav nav-tabs" id="createNewTemplate" role="tablist"> <li class="nav-item"> <div class="nav-link cursor-pointer" id="available-tab" data-toggle="tab" data-target="#available" role="tab" aria-controls="available" aria-selected="true">Available</div> </li> <li class="nav-item"> <div class="nav-link cursor-pointer active" id="new-tab" data-toggle="tab" data-target="#new" role="tab" aria-controls="new" aria-selected="false">New</div> </li> </ul> <div class="tab-content" id="newTemplateContent"> <div class="tab-pane fade" id="available" role="tabpanel" aria-labelledby="available-tab">Available content...</div> <div class="tab-pane fade show active" id="new" role="tabpanel" aria-labelledby="new-tab"> New content... </div> </div> </body>

Bootstrap 4 tabs without anchor (href) tag

Question

1 answers

solution1
1 ACCPTED 2021-02-24 11:58:24

Bootstrap 4 tabs without anchor (href) tag

Question

1 answers

solution1 1 ACCPTED 2021-02-24 11:58:24

solution1
1 ACCPTED 2021-02-24 11:58:24