如何在第二个html页面加载中基于上一页激活特定选项卡

Question

I have a pie chart. Functionality is that when I select a particular section of pie chart, then it redirects to the next page with selected tab. I am able to get value of that pie chart section by using this code:

 var search = document.URL.split('?')[1]; 

Now my fight is how to enable particular tab on the next page on the basis of value of "search" variable. Next when user comes direct to this page then 1st tab is enable by default. for this I used the code:

<div class="tab-pane in active" id="tab1">

I have tried in many ways(like $("ul.tabs li:first").addClass("active").show() or using eq() ) but have no success. Please let me know if anyone can help me out.

Answer 1

This should do the job:

<script>
    $(function() {
        $("#tabs").tabs();

        var search = document.URL.split('?')[1];
        switch (search) {
            case "error":
                $("#tab1 > a").click();
                break;
            case "suspect":
                $("#tab2 > a").click();
                break;
        }
    });
</script>

<div id="tabs">
    <ul class="nav nav-tabs" id="myTab">
        <li id="tab1" class="active"><a href="#error"data-toggle="tab"> Error</a></li>
        <li id="tab2"><a href="#suspect" data-toggle="tab" >Suspect </a></li>
    </ul>
    <div class="tab-pane in active" id="error">
        Error
    </div>
    <div class="tab-pane" id="suspect">
        Suspect
    </div>
</div>