CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
Aarav
Aarav

Reputation: 51

How to give an external link to a specific tab that was constructed using tabset class?

I want to provide a link <a> from another page that opens my page containing these tabs to view contents of, say tab2 directly. I'm just using CSS script for making these tabs, no JS for them. I'm looking for something that can work like "mypage/#tab2". It is not working for now. Please suggest something. Do I need a js file to make it work?

    <div class="tabset">
        <!-- Tab 1 -->
        <input type="radio" name="tabset" id="tab1" aria-controls="area1" checked>
        <label for="tab1">Area 1</label>
        <!-- Tab 2 -->
        <input type="radio" name="tabset" id="tab2" aria-controls="area2">
        <label for="tab2">Area 2</label>

        <div class="tab-panels">
          <section id="area1" class="tab-panel">
            <h2>6A. Märzen</h2>
            <p>Overall Impression: An elegant, malty German amber</p>
          </section>
          <section id="area2" class="tab-panel">
            <h2>6B. Rauchbier</h2>
            <p>Overall Impression: Toasty-rich malt in aroma and flavor.</p>
          </section>

Upvotes: 3

Views: 78

Answers (1)

Aarav
Aarav

Reputation: 51

I was able to work it my way using nav-tabs. You can provide href tag to any tab that you want to link from outside with mypage/#tab-3, ie. it will link directly to contents of tab-3 panel.

<ul class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-1">Tab 1</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-2">Tab 2</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-3">Tab 3</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-4">Pillowcases</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" role="tabpanel" id="tab-1">
                <p>Content for tab 1.</p>
            </div>

            <div class="tab-pane" role="tabpanel" id="tab-2">
                <h5>section B test</h5>
            </div>

            <div class="tab-pane" role="tabpanel" id="tab-3">
                <p>Content for tab 3.</p>
            </div>

            <div class="tab-pane" role="tabpanel" id="tab-4">
                <p>Content for tab 4.</p>
            </div>
        </div>

Add this script at the bottom:

    <script>
        jQuery(document).ready(function ($) {
            let selectedTab = window.location.hash;
            $('.nav-link[href="' + selectedTab + '"]' ).trigger('click');
        })
    </script>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Maybe you can add styles to it using css to modify the tab panel. This works fine but if anyone is good with css please add your code here to help us with the styling.

Upvotes: 1

Related Questions