时间戳

首页 > 解决方案 > Tabs navigation issue with search button?

angularjs - Tabs navigation issue with search button?

问题描述

We have two tabs 1st one is search filter and the 2nd one results tab. Where all the result is showing. When we click on the search button then the result tab is active and navigate successfully.

But when we click on the search tab and then click on the search button then the result tab is not active.

I am trying through the active and inactive class. but now working. 

<ul class="nav nav-tabs">
    <li ng-class="{'active': activeFilters}"><a data-toggle="tab" href="{{url}}#filter">Filter</a></li>
    <li ng-class="{'active': activeResults}"><a data-toggle="tab" href="{{url}}#results">Results</a></li>
</ul>

In ts file

$scope.activeFilters = false;
$scope.activeResults = true;

标签： angularjs

解决方案

Add data-target along with data-toggle. See below snippet that might help you.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" data-target="#home">Home</a></li>
    <li><a data-toggle="tab" data-target="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" data-target="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" data-target="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>
</html>

推荐阅读