jquery ui 选项卡未在 div 上激活

Question

我想使用可重用代码制作uild 标签。这个网站会有很多标签。选项卡下会有选项卡。所以我写了这段代码。但是一开始就报错

jquery-ui用于build标签。所有这些文本都是因为 Whosebug 抱怨我的问题中没有 'text' 而添加的。我认为这个问题简短明了。同时发布完整代码，方便人们回复和参考。

为什么使用函数调用没有激活选项卡？

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html" charset="UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Testing Tabs</title>
    
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="/jquery-ui/jquery-ui/jquery-ui.min.css"/>
    
    <!-- javascript jquery-ui ver: 1.12    jquery-ver: 3.5.1-->
    <script type="text/javascript" src="/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/jquery-ui/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/test/tabMgr.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){
            //activate tabs when page loads
            activateTabs("tab00");
            //following works....
            //$( "#tab00" ).tabs({
            //  active: 0
            //})
            
        }); 
    </script>   

</head>

<body>
    <div id="tab00" class="tab00 tabs">
        <ul>
            <li><a href="#Home">Home</a><span style="float: left;" ></span></li>
        </ul>
        <div id="Home">
            <h2>Page 0</h2>
        </div>
    </div>
        
    <hr />
    <center>testing </center>

</body>

</html>

js文件：

//public vars....
var tabCounter = {};  //used to figure tab exists or not. jquery Object works-as JSON array   tabCounter["tabName"]=1  and value 1 = tabCounter["tabName"]
var allTabs = {};   //container for dynamically generated variable names for tabs


//public functions...

//ui-tabs
    /*
    pD = parent/main Div in which Tabs will be defined, added/removed.
            This is ID and Class name of the main DIV on that HTML page.
            id = class, Has to be same.
    tT = tab title
    tC = tab content
    dT = tab div;  ID of new Tab, class will be the same. (this is to be added or removed)
    */
function activateTabs(pD){
    //activating tabs on main div and creating dynamic variable name to access later
    allTabs[pD] = '$( "#' + pD +'" ).tabs({\
          active: 0\
        })';
    console.log("pD="+pD+"   allTabs["+pD+"] = "+allTabs[pD]);
}

function addTab(pD, tT, tD, tC){
    var tabTmpl = "<li><a href='#{href}'>#{tabTitle}</a> <span class='ui-icon ui-icon-close' style=\"float:left;\" role='presentation'>Remove Tab</span></li>";
    var mainTabDiv = allTabs[pD];
    var newTabDivID = mainTabDiv + '-' + tD;
    var li = $( tabTmpl.replace( /#\{href\}/g, "#" + newTabDivID ).replace( /#\{tabTitle\}/g, tT ) );
    var tabContentHtml = tC;

    //preventing duplicate Tabs....
    var k = tabCounter[newTabDivID];
    if ( !isNaN(k) && (k > 0) ){
        alert ('tab already exist');
        return false;
    }
    tabCounter[newTabDivID] = 1;        // increase value by one
    
    // http://jsfiddle.net/YnXH4/1/
    // 
    mainTabDiv.find( '"#' + pD + '"' ).append(li);
    mainTabDiv.append( '<div id="' + newTabDivID + '">' + tabContentHtml + '</div>' );
    mainTabDiv.tabs( "refresh" );
    console.log('addTab  tabTitle='+ tT +'  newTabDivID='+newTabDivID+'    li='+li);   //("#newTabDivID").innerHTML);
}

function remTab(pD) {
    var mainTabDiv = allTabs[pD];
    
    // close icon: removing the tab on click
    mainTabDiv.delegate( "span.ui-icon-close", "click", function() {
      var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
        //to check panelID is same as Div ID of this tab...  
        console.log('mainTabDiv.delegate function: panelId='+panelId);
      tabCounter[panelId] = 0;
      $( "#" + panelId ).remove();
      mainTabDiv.tabs( "refresh" );
    });
 
    mainTabDiv.bind( "keyup", function( event ) {
      if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
        var panelId = mainTabDiv.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
        
        console.log('mainTabDiv.bind function: panelId='+panelId);
        
        tabCounter[panelId] = 0;
        $( "#" + panelId ).remove();
        mainTabDiv.tabs( "refresh" );
      }
    });
}
//#################  end dynamic tab add/remove

Answer 1

不确定您打算如何使用 addTab，但在将 activateTabs 功能更改为：

后，能够让“主页”选项卡看起来更像一个选项卡

function activateTabs(pD){
    //activating tabs on main div and creating dynamic variable name to access later
    allTabs[pD] = $( '#' + pD ).tabs({
          active: 0
        });
    console.log("pD="+pD+"   allTabs["+pD+"] = "+allTabs[pD]);
}

jquery ui 选项卡未在 div 上激活

jquery ui tab not activating on div

jquery

jquery-ui