[英]My jQuery UI Tabs don't work although there is no error at console
我不知道為什么我的標簽不起作用。 我需要使用jQuery UI讓標簽移動。 我在jQuery UI選項卡中找不到相同的問題,但它沒有幫助我。 這是我的HTML應該創建選項卡,但它不起作用。 我甚至沒有在瀏覽器中發現任何控制台錯誤。
這是HTML中的標簽代碼
<link rel="stylesheet" href="js/jquery-ui-1.11.1/jquery-ui.css"/>
<div id="tabsCtrl">
<ul>
<li><a href="#tab1"><span class="number">1</span>BAG</a></li>
<li><a href="#tab2"><span class="number">3</span>BAGS</a></li>
<li><a href="#tab3"><span class="number">6</span>BAGS</a></li>
</ul>
<div id="tab1">
<p class="price">Regular Price:
<s>
<span class="old-price">$59.95</span>
</s>
</p>
<p class="saving">
Instant Savings:
<span save-p>$30</span>
</p>
<p class="extra-s" style="display: none;">
Extra Savings:
<span>$1</span>
</p>
<p class="big-price">$29.95</p>
<p class="payment" style="display: block;">(This is a one time payment)</p>
<div class="new-button">
<button id="addTab">BUY NOW</button>
</div>
<div class="shipping">
<span class="cost">+$4.95 SHIPPING</span>
</div>
</div>
<hr>
<div id="tab2">
<p class="price">Regular Price:
<s>
<span class="old-price">$179.85</span>
</s>
</p>
<p class="saving">
Instant Savings:
<span save-p>$96</span>
</p>
<p class="extra-s" style="display: none;">
Extra Savings:
<span>$3</span>
</p>
<p class="big-price">$83.85</p>
<p class="payment" style="display: block;">(This is a one time payment)</p>
<div class="new-button">
<button id="addTab">BUY NOW</button>
</div>
<div class="shipping">
<span class="cost">Free Shipping</span>
</div>
</div>
<hr>
<div id="tab3">
<p class="price">Regular Price:
<s>
<span class="old-price">$359.70</span>
</s>
</p>
<p class="saving">
Instant Savings:
<span save-p>$198</span>
</p>
<p class="extra-s" style="display: none;">
Extra Savings:
<span>$6</span>
</p>
<p class="big-price">$161.70</p>
<p class="payment" style="display: block;">(This is a one time payment)</p>
<div class="new-button">
<button id="addTab">BUY NOW</button>
</div>
<div class="shipping">
<span class="cost">Free Shipping</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-ui-1.11.1/external/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js"></script>
<script>
var url = "js/plugins.js";
$.getScript(url);
</script>
這是我在Plugins.js中的代碼
$("document").ready(function() {
$.ajax({
async: true, // this will solve the problem
type: "POST",
url: "/Page/Method",
contentType: "application/json",
data: JSON.stringify({ ParameterName: paramValue }),
});
$("#tabsCtrl").tabs();
});
如您所見,標簽運行良好,您確定所有內容都已導入嗎? 您是否有理由嘗試通過jQuery導入plugins.js而不是使用<script type="text/javascript" src="js/plugins.js"></script>
?
$("document").ready(function() { // $.ajax({ // async: true, // this will solve the problem // type: "POST", // url: "/Page/Method", // contentType: "application/json", // data: JSON.stringify({ // ParameterName: paramValue // }), // }); $("#tabsCtrl").tabs(); });
<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <div id="tabsCtrl"> <ul> <li><a href="#tab1"><span class="number">1</span>BAG</a></li> <li><a href="#tab2"><span class="number">3</span>BAGS</a></li> <li><a href="#tab3"><span class="number">6</span>BAGS</a></li> </ul> <div id="tab1"> <p class="price">Regular Price: <s> <span class="old-price">$59.95</span> </s> </p> <p class="saving"> Instant Savings: <span save-p>$30</span> </p> <p class="extra-s" style="display: none;"> Extra Savings: <span>$1</span> </p> <p class="big-price">$29.95</p> <p class="payment" style="display: block;">(This is a one time payment)</p> <div class="new-button"> <button id="addTab">BUY NOW</button> </div> <div class="shipping"> <span class="cost">+$4.95 SHIPPING</span> </div> </div> <hr> <div id="tab2"> <p class="price">Regular Price: <s> <span class="old-price">$179.85</span> </s> </p> <p class="saving"> Instant Savings: <span save-p>$96</span> </p> <p class="extra-s" style="display: none;"> Extra Savings: <span>$3</span> </p> <p class="big-price">$83.85</p> <p class="payment" style="display: block;">(This is a one time payment)</p> <div class="new-button"> <button id="addTab">BUY NOW</button> </div> <div class="shipping"> <span class="cost">Free Shipping</span> </div> </div> <hr> <div id="tab3"> <p class="price">Regular Price: <s> <span class="old-price">$359.70</span> </s> </p> <p class="saving"> Instant Savings: <span save-p>$198</span> </p> <p class="extra-s" style="display: none;"> Extra Savings: <span>$6</span> </p> <p class="big-price">$161.70</p> <p class="payment" style="display: block;">(This is a one time payment)</p> <div class="new-button"> <button id="addTab">BUY NOW</button> </div> <div class="shipping"> <span class="cost">Free Shipping</span> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="js/jquery-ui-1.11.1/jquery-ui.css" /> <script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.