click to move on top of the tabs section

2 years ago

#36589

Designer16

I have multiple 5 tabs with content for each tabs, I created tab in footer for click to move next. Now when I click to next tab text its working to move to next tab but after move tab page is still in footer where we clicked I need when click to next tab, next page will open from top tabs, thanks in advance

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="tab" role="tabpanel">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs about-sii-tab" role="tablist">
    <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">Tab 1</a></li>
    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Tab 2</a></li>
    <li role="presentation"><a href="#Section3" aria-controls="profile" role="tab" data-toggle="tab">Tab 3</a></li>
    <li role="presentation"><a href="#Section4" aria-controls="profile" role="tab" data-toggle="tab">Tab 4</a></li>
    <li role="presentation"><a href="#Section5" aria-controls="profile" role="tab" data-toggle="tab">Tab 5</a></li>
  </ul>
</div>

<!--footer tab for move next -->

<nav>
  <ul class="switch-box theme-colored pull-right m-0" role="tablist">
    <li class="switch-text">Switch to <a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">Next Tab</a></li>
  </ul>
</nav>

html

tabs

switching

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs