Tue. Jun 6th, 2023

[ANSWERED] javascript – Tab switching not working right on multiple cards

By

Nov 18, 2022 bootstrap-4, css, html, javascript, jquery

Solution 1 :

It’s because of the used classes and href’s, try this for example:

$(document).on('click','.navigation a', function (e) {
    e.preventDefault();
    $(this).tab('show');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-columns">
  <div class="card">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs navigation" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" href=".info" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"  href=".ingredients" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=".nutrition" role="tab" aria-controls="nutrition" aria-selected="false" data-toggle="tab">Nutrition information</a>
        </li>
      </ul>
    </div>
    
    <div class="card-body">
      <h4 class="card-title">Item name</h4>
      <div class="tab-content mt-3">
        <div class="tab-pane active info" role="tabpanel">
          <img src="https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="card-img-top" alt="">
          <div class="text-center">
            <a href="" target=_blank><button type="button" class="btn btn-primary">Full recipe</button></a>
            <a href=""><button type="button" class="btn btn-primary">Add to favorites</button></a>
          </div>
        </div>

        <div class="tab-pane ingredients" role="tabpanel" aria-labelledby="ingredients-tab">
          <h6 class="card-subtitle mb-2">Ingredient list</h6>
          <ul id=ingredientList>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
          </ul>
        </div>

        <div class="tab-pane nutrition" role="tabpanel" aria-labelledby="nutrition-tab">
          <h6 class="card-subtitle mb-2">Nutrition information</h6>
          <ul id=nutritionInfo>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs navigation" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" href=".info2" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"  href=".ingredients2" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=".nutrition2" role="tab" aria-controls="nutrition" aria-selected="false" data-toggle="tab">Nutrition information</a>
        </li>
      </ul>
    </div>
    
    <div class="card-body">
      <h4 class="card-title">Item name</h4>
      <div class="tab-content mt-3">
        <div class="tab-pane active info2" role="tabpanel">
          <img src="https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="card-img-top" alt="">
          <div class="text-center">
            <a href="" target=_blank><button type="button" class="btn btn-primary">Full recipe</button></a>
            <a href=""><button type="button" class="btn btn-primary">Add to favorites</button></a>
          </div>
        </div>

        <div class="tab-pane ingredients2" role="tabpanel" aria-labelledby="ingredients-tab">
          <h6 class="card-subtitle mb-2">Ingredient list</h6>
          <ul id=ingredientList>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
          </ul>
        </div>

        <div class="tab-pane nutrition2" role="tabpanel" aria-labelledby="nutrition-tab">
          <h6 class="card-subtitle mb-2">Nutrition information</h6>
          <ul id=nutritionInfo>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs navigation" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" href=".info3" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"  href=".ingredients3" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=".nutrition3" role="tab" aria-controls="nutrition" aria-selected="false" data-toggle="tab">Nutrition information</a>
        </li>
      </ul>
    </div>
    
    <div class="card-body">
      <h4 class="card-title">Item name</h4>
      <div class="tab-content mt-3">
        <div class="tab-pane active info3" role="tabpanel">
          <img src="https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="card-img-top" alt="">
          <div class="text-center">
            <a href="" target=_blank><button type="button" class="btn btn-primary">Full recipe</button></a>
            <a href=""><button type="button" class="btn btn-primary">Add to favorites</button></a>
          </div>
        </div>

        <div class="tab-pane ingredients3" role="tabpanel" aria-labelledby="ingredients-tab">
          <h6 class="card-subtitle mb-2">Ingredient list</h6>
          <ul id=ingredientList>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
          </ul>
        </div>

        <div class="tab-pane nutrition3" role="tabpanel" aria-labelledby="nutrition-tab">
          <h6 class="card-subtitle mb-2">Nutrition information</h6>
          <ul id=nutritionInfo>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  </div>

Problem :

I’m creating an app which generates multiple cards with 3 tabs on each. But tab switching doesn’t work as it’s supposed. When doing it on first card it works alright, but when I try to press on other cards tabs it keeps switching on first card only. I can’t wrap my head around it.

$(document).on('click', '.navigation a', function(e) {
  e.preventDefault();
  $(this).tab('show');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="card-columns">
  <div class="card">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs navigation" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" href=".info" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=".ingredients" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=".nutrition" role="tab" aria-controls="nutrition" aria-selected="false" data-toggle="tab">Nutrition information</a>
        </li>
      </ul>
    </div>

    <div class="card-body">
      <h4 class="card-title">Item name</h4>
      <div class="tab-content mt-3">
        <div class="tab-pane active info" role="tabpanel">
          <img src="https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="card-img-top" alt="">
          <div class="text-center">
            <a href="" target=_blank><button type="button" class="btn btn-primary">Full recipe</button></a>
            <a href=""><button type="button" class="btn btn-primary">Add to favorites</button></a>
          </div>
        </div>

        <div class="tab-pane ingredients" role="tabpanel" aria-labelledby="ingredients-tab">
          <h6 class="card-subtitle mb-2">Ingredient list</h6>
          <ul id=ingredientList>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
          </ul>
        </div>

        <div class="tab-pane nutrition" role="tabpanel" aria-labelledby="nutrition-tab">
          <h6 class="card-subtitle mb-2">Nutrition information</h6>
          <ul id=nutritionInfo>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs navigation" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" href=".info" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=".ingredients" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=".nutrition" role="tab" aria-controls="nutrition" aria-selected="false" data-toggle="tab">Nutrition information</a>
        </li>
      </ul>
    </div>

    <div class="card-body">
      <h4 class="card-title">Item name</h4>
      <div class="tab-content mt-3">
        <div class="tab-pane active info" role="tabpanel">
          <img src="https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="card-img-top" alt="">
          <div class="text-center">
            <a href="" target=_blank><button type="button" class="btn btn-primary">Full recipe</button></a>
            <a href=""><button type="button" class="btn btn-primary">Add to favorites</button></a>
          </div>
        </div>

        <div class="tab-pane ingredients" role="tabpanel" aria-labelledby="ingredients-tab">
          <h6 class="card-subtitle mb-2">Ingredient list</h6>
          <ul id=ingredientList>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
          </ul>
        </div>

        <div class="tab-pane nutrition" role="tabpanel" aria-labelledby="nutrition-tab">
          <h6 class="card-subtitle mb-2">Nutrition information</h6>
          <ul id=nutritionInfo>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs navigation" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" href=".info" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=".ingredients" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=".nutrition" role="tab" aria-controls="nutrition" aria-selected="false" data-toggle="tab">Nutrition information</a>
        </li>
      </ul>
    </div>

    <div class="card-body">
      <h4 class="card-title">Item name</h4>
      <div class="tab-content mt-3">
        <div class="tab-pane active info" role="tabpanel">
          <img src="https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="card-img-top" alt="">
          <div class="text-center">
            <a href="" target=_blank><button type="button" class="btn btn-primary">Full recipe</button></a>
            <a href=""><button type="button" class="btn btn-primary">Add to favorites</button></a>
          </div>
        </div>

        <div class="tab-pane ingredients" role="tabpanel" aria-labelledby="ingredients-tab">
          <h6 class="card-subtitle mb-2">Ingredient list</h6>
          <ul id=ingredientList>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
          </ul>
        </div>

        <div class="tab-pane nutrition" role="tabpanel" aria-labelledby="nutrition-tab">
          <h6 class="card-subtitle mb-2">Nutrition information</h6>
          <ul id=nutritionInfo>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Issue example on Codepen

Comments

Comment posted by disinfor

You need to give your tabs unique classes or something else to target.

Comment posted by bordax

I was actually expecting jquery code to make it work. But the answer turned out to be straight forward. Thanks for help and editing my post to look more clear,

Comment posted by bordax

It seems to work this way. I actually was thinking that it’s jquery issue and that there has to be a way to refer to same element. And it turned out the answer are pretty straight forward. Thanks for help

By

Related Post

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022

[ANSWERED] html – Hidden Div Text Reappears?

Nov 20, 2022

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

Nov 20, 2022