JQuery对话框中的Bootstrap Pills

当我点击药丸切换视图时，什么也没发生。

因为选项卡中有相同的内容。

<div class="tab-content">
        <div class="tab-pane active" id="contactUs">
            <h2>
                contact us</h2> // Here..
        </div>
        <div class="tab-pane" id="applyOnline">
            <h2>
                contact us</h2> // And Here..
        </div>
</div>

无论如何，这可能发生在任何人身上，谢谢。。

function ShowContactUs() {
            $(function () {
                $("#contactUsContainer").dialog({
                    create: function () { $(this).parent().appendTo('form') },
                    modal: true, width: 500,
                    position: { my: 'top', at: 'top+400' },
                    title: "Contact Us/Complete Online"
                }
                      );
            });
        };

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" />
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" /> 
<button class="btn btn-primary" onclick="ShowContactUs()" >Show</button>
<div id="contactUsContainer" class="ui-helper-hidden">
	       <div id="Div1">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container" style="width: auto; height: auto;">
                    <ul class="nav nav-pills">
                        <li class="active"><a href="#contactUs" data-toggle="tab">Contact Us</a></li>
                        <li><a href="#applyOnline" data-toggle="tab">Apply Online</a></li></ul>
                </div>
            </div>
        </div>
        <div class="tab-content">
            <div class="tab-pane active" id="contactUs">
                <h2>
                    Contact Us</h2>
            </div>
            <div class="tab-pane" id="applyOnline">
                <h2>
                    Apply Online</h2>
            </div>
        </div>
    </div>
</div>

当从脚本中删除以下行（块中突出显示）时，不确定它对JQuery对话框产生了什么影响。然而，删除这条线解决了问题。如果有人对此了解更多，请随时发表评论。

    function ShowContactUs() {
                $(function () {
                    $("#contactUsContainer").dialog({
                        create: function () 
{

$（this）.Pparent（）.appendTo（'form'）

},
                        modal: true, width: 500,
                        position: { my: 'top', at: 'top+400' },
                        title: "Contact Us/Complete Online"
                    }
                          );
                });
            };

正如OP在他的评论中所说，他的HTML标记上有多个<form>元素，所以当执行jQuery Dialog时，它有这样的指令：

create: function () { $(this).parent().appendTo('form') },

然后，它从对话框中获取所有HTML，并将它们附加到DOM上所有表单元素中。因此，这将创建具有相同ID值的重复对话框。DOM上不应该有重复的ID值。

那么选项卡就不起作用了，因为Bootstrap选项卡插件的工作原理是这样的，当锚<a>元素具有data-toggle="tab"属性时，它将获得href="#contactUs"的值，以获得具有要显示的选项卡内容的<div>的ID，由于它们在上一个脚本上是重复的，所以行为并不像预期的那样，因为它只是一个具有该ID的选项卡内容div来触发选项卡显示操作。

要解决此问题，请为要在HTML中包含对话框（示例）<form id="my-desired-form">的<form>元素分配一个ID。

然后将Javascript更改为

create: function () { $(this).parent().appendTo('#my-desired-form') },