Question

上午，

在网络上不是很擅长，因此感谢我对以下问题的任何帮助。

这里我使用Bootstrap药片而不是tab来显示可切换的视图。这项工作在网页上，并在点击每个药丸时显示页面。

请检查一下。

<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>

<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" />

<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>

但是，当我尝试使用JQuery Dialog加载上述内容时，挑战就开始了。即，我能够看到我的模型对话框弹出，渲染药片和第一页。但是当我点击药片切换视图时没有任何反应。

请检查一下。

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>

有人可以就此提出建议吗？

Answer 1

单击药片切换视图时没有任何反应。

因为标签中有相同的内容。

<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>

没关系，任何人都可能发生这种情况，谢谢......

＆＃13;

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"
                    
                }
                      );

            });

        };

＆＃13;

<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>

＆＃13;

Answer 2

在从脚本中删除后续行（在块中突出显示）时，不确定它对JQuery对话框产生了什么影响。但是，删除该行解决了这个问题。如果有人了解更多信息，请随时发表评论。

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

$（本）.parent（）。appendTo（ '形式'）

},
                        modal: true, width: 500,

                        position: { my: 'top', at: 'top+400' },
                        title: "Contact Us/Complete Online"

                    }
                          );

                });

            };

Answer 3

正如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的tab-content div触发标签显示动作。

要解决此问题，请为要在HTML上包含对话框（示例）<form>的{{1}}元素分配ID。

然后将Javascript更改为

<form id="my-desired-form">

JQuery对话框中的Bootstrap Pills

3 个答案: