0

I used the tab feature in Bootstrap in a different way for a high-fidelity prototype. Using it to go from one section to another but not using the tabs so the first page shows, then you just use an anchor to go from section to section. The problem I have come up with is that I need to go from one page to a specific section "tab" within another. I can't figure out how to do this. I am not great with javascript so any help would be greatly appreciated.

Page 1 - Home.cshtml

 <a class="btn btn-primary" href="AlignTeam#stepAlign2" data-target="#stepAlign2">Next</a>

Page 2 - AlignTeam.cshtml

<div class="page-body myWizard"> 
<div class="tab-content">
    <!-- STEP ONE -->
    <div class="tab-pane fade in active" id="stepAlign1">
        Content
    </div>

    <!-- STEP TWO -->
    <div class="tab-pane fade" id="stepAlign2">
        Content
    </div>      

    <!-- STEP THREE -->
    <div class="tab-pane fade" id="stepAlign3">
        Content
    </div>
</div>

deanne711
  • 11
  • 2
  • Might be a duplicate of this: http://stackoverflow.com/questions/9652944/jquery-scroll-to-id-from-different-page – aholtry Apr 26 '17 at 21:23
  • Unfortunately it is not, it is not a scrolling issue, I have to show one tab vs another. I have hit quite a few stackoverflow posts without luck – deanne711 Apr 26 '17 at 21:53
  • ah ok, bootstrap works off of the idea of setting the class to 'active'. Try appending that class 'active' to the div that you want to display. You might need to do a little jQuery magic to get through this. – aholtry Apr 26 '17 at 22:14

1 Answers1

0
  1. You might be forgot to include .html (file extension) on AlignTeam which is href="AlignTeam#stepAlign2". It has to be href="AlignTeam.html#stepAlign2".
  2. You need a bit of knowledge on Javascript & JQuery to be able to achieve that.
  3. I have provided you the solution on Plunker. You could learn more from it because you can preview it's result as well.

Let me know later if you find this helpful. Cheers !

ridoansaleh
  • 604
  • 9
  • 20
  • The problem with your solution is that it does not work if you don't have the tabs, which I am not using the tabs, that is the problem I am coming across. This is where I am stumped. I do not have the UL/LI code to go along with it. I am moving through each page just by going to the target, which is working really well to keep organized. – deanne711 Apr 27 '17 at 06:18
  • so, you don't use tabs on alignteam.html ? – ridoansaleh Apr 27 '17 at 09:07
  • No, I am using the code above without the tabs, it works great from moving from section to section throughout a page without having multiple pages, just having this one issue. – deanne711 Apr 27 '17 at 13:32