1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: open a specific tab

webmaster1 pro asked 6 years ago

I am using dynamics from pro version . How i can open direcly a specific tab with a external link? And a subtab? (a tab in a tab)? Thanks in advance for the replys

Kamil Paciepnik free answered 6 years ago

Please add at the bottom HTML files this code: 
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');

$('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    $('html,body').scrollTop(scrollmem);
});
Now you can open the tabs using links - http://www.example.com/#panel3 Regards

webmaster1 pro answered 6 years ago

sorry for the @ in the url example, is a mistake http://www.example.com#panel3

webmaster1 pro answered 6 years ago

Thansk by the reponse But i am trying to open a tab with a external url if i put www.example.com@#panel3 (or another combination) in the url of my blank brownser... i want to open the page with the panel3 tab active in the screen how i can make it?

Kamil Paciepnik free answered 6 years ago

Hi webmaster1, below the code that you need. If this does not solve your problem, please write what to improve. 
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-3 red" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#panel1" role="tab">Profile</a>
    </li>
    <!-- Tab with external link -->
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel2" role="tab" onclick="window.open('https://mdbootstrap.com')">Follow</a>
    </li>
    <!-- /.Tab with external link -->
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#panel3" role="tab">Contact</a>
    </li>
</ul>

<!-- Tab panels -->
<div class="tab-content card">

    <!--Panel 1-->
    <div class="tab-pane fade in active" id="panel1" role="tabpanel">
        <br>

        <!-- Tab in the Tab -- >
        <!-- Nav tabs -->
        <ul class="nav nav-tabs tabs-3 blue" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel4" role="tab">Profile 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel5" role="tab">Follow 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel6" role="tab">Contact 2</a>
            </li>
        </ul>

        <!-- Tab panels -->
        <div class="tab-content card">

            <!--Panel 4-->
            <div class="tab-pane fade in active" id="panel4" role="tabpanel">
                <br>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 4-->

            <!--Panel 5-->
            <div class="tab-pane fade" id="panel5" role="tabpanel">
                <br>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 5-->

            <!--Panel 6-->
            <div class="tab-pane fade" id="panel6" role="tabpanel">
                <br>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 6-->

        </div>
        <!-- /.Tab in the Tab -->

    </div>
    <!--/.Panel 1-->

    <!--Panel 2-->
    <div class="tab-pane fade" id="panel2" role="tabpanel">
        <br>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

    </div>
    <!--/.Panel 2-->

    <!--Panel 3-->
    <div class="tab-pane fade" id="panel3" role="tabpanel">
        <br>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

    </div>
    <!--/.Panel 3-->

</div>
Regards
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
webmaster1
Pro User 37Support score
3Questions 6Answers 0Snippets