当尝试从Jquery ui 1.8.20升级到1.10.3时，选项卡无法工作

Tabs wont work trying to upgrade from Jquery ui 1.8.20 to 1.10.3

本文关键字：3时 选项 工作 Jquery ui 20升      更新时间：2023-09-26

我似乎看不到jquery ui从1.8.20版本到我现在使用的1.10.3版本的更改日志中有什么变化

我从数据库动态地拉数据，它复制标签，因为它需要。选项卡不起作用，相反，它显示页面上所有打开的选项。所以我猜好像隐藏css不起作用。当你点击选项卡时，它也不做任何事情。

它正在创建选项卡并显示内容。就像我说的，所有div显示而不是被隐藏，除非你选择一个选项卡。因此，点击标签页什么也做不了，因为所有内容都已经显示出来了。

我认为脚本中需要修改的部分在这里:

<html style="height:100% !important;">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--Loading bootstrap css-->
<link type="text/css"
href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
<link type="text/css" rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="vendors/bootstrap/css/bootstrap.min.css">
<!--LOADING SCRIPTS FOR PAGE-->
<link type="text/css" rel="stylesheet" href="vendors/dhtmlxGantt/dhtmlxgantt.css">
<!--Loading style vendors-->
<link type="text/css" rel="stylesheet" href="vendors/animate.css/animate.css">
<link type="text/css" rel="stylesheet" href="vendors/jquery-pace/pace.css">
<!--Loading style-->
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="style-mango.css" id="theme-style">
<link type="text/css" rel="stylesheet" href="css/themes/default.css" id="color-style">
<link type="text/css" rel="stylesheet" href="css/vendors.css">
<link type="text/css" rel="stylesheet" href="css/style-responsive.css">
<link type="text/css" href="vendors/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="shortcut icon" href="images/icons/favicon.ico">
</head>
<!--BEGIN CONTENT-->
<div class="page-content" style="min-height:1400px;">
                            <div class="col-md-9" id="nfw_body_body" style="height:100%;">
<style>
div.ui-tabs { width:100%; height:80%; min-height:700px; margin:5px; float:left; border:none; }
#tabs .ui-widget-content { border:none; padding:0px; margin:0px; background-color:#fff !important;" }
}
</style>
<script language="javascript">
var dyna_tabs = {
tabs: null,
init: function (id) {
    var tabs = $('<div></div>').append('<div id="'+ id + '"></div>');
    $('#nfw_body_body').append(tabs);
    var list = $('<ul></ul').append('<li><a href="#"></a></li>');
    tabs.append(list);
    tabs.tabs();
    // remove the dummy tab
    tabs.tabs('remove', 0);
    tabs.hide();
    this.tabs = tabs;
},
add: function (tab_id, tab_name, tab_content) {
    if (this.tabs != null) {
        if (this.tabs.css('display') == 'none') {
            this.tabs.show();
        }
        var data = $('<div id="'+tab_id+'"></div>').append(tab_content);
        this.tabs.append(data).tabs('add', '#' + tab_id, tab_name);
        this.tabs.tabs('beforeActivate', '#' + 1);
    } else {
        alert('Tabs not initialized!');
    }
  }
};

$(document).ready(function() {  
 dyna_tabs.init('mytabs');
  dyna_tabs.add(
        'tabs-' + 1, 
        ' User Details', 
        '<div id="tabs-1" ></div>'
    );
     $('#tabs-1').load("content/change_user_details.php?user_id=");

 dyna_tabs.add(
        'tabs-' + 2, 
        'Pest Control', 
        '<div id="tabs-2"><h2>Pest Control</h2></div>'
    );
    $('#tabs-' + 2).load("content/change_service_details.php?service_id=");
2   
 dyna_tabs.add(
        'tabs-' + 3, 
        'House Cleaning', 
        '<div id="tabs-3"><h2>House Cleaning</h2></div>'
    );
    $('#tabs-' + 3).load("content/change_service_details.php?service_id=);
3 

});

</script>
</div>
<!--END CONTENT-->
                                        </div>
<!--END CONTENT-->
<!--START FOOTER -->
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<!--loading bootstrap js-->
<script src="vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="vendors/metisMenu/jquery.metisMenu.js"></script>
<script src="vendors/slimScroll/jquery.slimscroll.js"></script>
<script src="vendors/jquery-cookie/jquery.cookie.js"></script>
<script src="js/jquery.menu.js"></script>
<script src="vendors/jquery-pace/pace.min.js"></script>
<!--LOADING SCRIPTS FOR PAGE-->
<!--CORE JAVASCRIPT-->
<script src="js/main.js"></script>
<script src="js/holder.js"></script>
<!--END FOOTER-- >

这是通过多个版本和调用jquery来解决的。

相关文章：