Мои вкладки пользовательского интерфейса jQuery не работают, хотя в консоли нет ошибок

Question

Я не знаю, почему мои вкладки не работают. Мне нужно, чтобы вкладки перемещались с помощью 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();
});

Answer 1

Как видите, вкладки работают хорошо, вы уверены, что все импортируется? И есть ли причина, по которой вы пытаетесь импортировать свой plugins.js с помощью jQuery вместо использования <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>