堆棧內存溢出
  簡體   English   中英

jQuery選項卡ui不起作用

[英]jQuery tabs ui not working

 原文  2016-04-21 12:09:06  4   2    javascript/ jquery/ user-interface/ jquery-ui/ jquery-tabs

問題描述

我試圖在頁面上使用jquery ui選項卡，但是出現一些錯誤，我無法調試它。

我查看了發布的其他一些解決方案，並嘗試了所有解決方案...仍然不起作用..請提供適當的解決方案幫助。

HTML代碼 

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- <script src="//code.jquery.com/jquery-1.10.2.js"></script> -->
<script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
   $("#tabs").tabs();
</script>
</head>

<body>
<!--TOP NAV-->
<div id="topNav">
  <div class="topNavWrap">
    <div class="logo"><img src="images/logo.png" /></div>
    <div class="nav">
      <ul id="mainNav">
        <li><a href="#">Season '13 / '14</a></li>
        <li><a href="#">Reservations</a></li>
        <li><a href="#">International Prize for "The Naked Theatre"</a></li>
        <li><a href="#">Archive</a></li>
        <li><a href="#">Average</a></li>
        <li><a href="#">Contacts</a></li>
      </ul>
      <div class="CL"></div>
    </div>
    <div class="CL"></div>
  </div>

</div>

<!--BANNER NAV-->
<div id="bannerNav">
  <div class="bannerNavWrap">
    <div class="container">
      <div id="slides"> <img src="images/img-01.jpg" /> <img src="images/img-02.jpg" /> <img src="images/img-03.jpg" /> <img src="images/img-04.jpg" /> <a class="slidesjs-previous slidesjs-navigation" href="#"></a> <a class="slidesjs-next slidesjs-navigation" href="#"></a> </div>
    </div>
  </div>
</div>

<!--CONTENT NAV-->
<div id="contentNav">
  <div class="contentNavWrap"> 
    <!--CONTENT LEFT NAV-->
    <div class="contentLeft">
      <h2 class="withBG">LOREM IPSUM</h2>
      <h3 class='wdm'>13/9 - 29/9</h3>
      <h2 class="heading">DESCRIPTION</h2>
      <p>Negli anni precedenti NO’HMA ha svolto la sua densa, dina mica attività in luoghi vari e diversi della città, dai più presti Negli anni precedenti NO’HMA ha svolto la sua densa, dina mica attività in luoghi vari e diversi della città, dai più presti Negli anni precedenti NO’HMA ha svolto la sua densa, dina mica attività in luoghi vari e diversi della città, dai più presti Negli anni precedenti NO’HMA ha svolto la sua densa, dina mica attività in luoghi vari e diversi della città. </p>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1"><span class='icon-mail'></span>Contact Us</a></li>
    <li><a href="#tabs-2"><span class='icon-users'></span>About Us</a></li>
  </ul>
  <div id="tabs-1">
    <form class="contact-form" method="post" action="">

    <p>Name
        <span class="your-name"><input type="text" aria-required="true" class="wdm_input" size="60" value="" name="your-name" /></span> </p>

    <p>Email
        <span class="your-email"><input type="email" aria-required="true" class="wdm_input" size="60" value="" name="your-email" /></span> </p>

    <p>Subject
        <span class="your-subject"><input type="text" class="wdm_input" size="60" value="" name="your-subject" /></span> </p>

    <p><input type="submit" class="wpcf7-form-control wpcf7-submit" value="Send" /></p>

    </form>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus.</p>
  </div>
</div>

    </div>
    <!--CONTENT RIGHT NAV-->
    <div class="contentRight">
      <h2 class="heading">SPECIAL FEATURES</h2>
      <div class="contxt">
        <div class="bx">
          <div class="icon video"></div>
          <p class="FL noMargin">GUARDA IL VIDEO PROMO: <br />
            http://teatronohma/it/00007/4234/page.html</p>
          <div class="CL"></div>
        </div>
        <div class="bx padB20">
          <div class="icon page"></div>
          <p class="FL noMargin">LEGGI LA RECENSIONE DELLO SPETTACOLO: <br />
            http://teatronohma.tv/it/00007/4234/page.html</p>
          <div class="CL"></div>
        </div>
        <div class="bx"> <a href="#"><img src="images/btn.png"  /></a> </div>
        <h2 class="heading">CREDITS</h2>
        <p class="padB20">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean </p>
        <h2 class="heading">INFO E PRENOTAZIONI</h2>
        <p>Per informazioni su biglietti e abbonamenti per i gruppi organiz zati, pomeridiane per le scuole, spettacoli educational, rivolgersi al Servizio Promozione Pubblico e Proposte Culturali. <br />
          tel. 02 72.333.216 <br />
          e-mail: promozione.pubblico@piccoloteatromilano.it</p>
      </div>
    </div>
    <div class="CL"></div>
  </div>
</div>

<!--FOOTER NAV-->
<div id="footerNav">
  <div class="footerNavWrap">
    <div class="footerNavi">
      <ul>
        <li><a href="#">Lavora con noi</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Media</a></li>
        <li><a href="#">Archivio</a></li>
      </ul>
      <ul>
        <li><a href="#">Note legali</a></li>
        <li><a href="#">Mappa del sito</a></li>
        <li><a href="#">Credits</a></li>
        <li><a href="#">Contatti</a></li>
      </ul>
      <div class="CL"></div>
    </div>
  </div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script>
$(document).ready(function(){
 $('#slides').slidesjs({
     width: 1024,
     height: 369,
     navigation: true
   });
});
</script>


</html>

2 個解決方案

解決方案1
 1  2016-04-21 12:17:56

您已經包含了兩次jQuery：一次在頭，兩次在html標簽關閉之前。

解決方案2
 1 已采納  2016-04-21 12:22:22

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TEST</title> <link rel="stylesheet" type="text/css" href="style.css" /> <!-- <script src="//code.jquery.com/jquery-1.10.2.js"></script> --> <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /> </head> <body> <!--TOP NAV--> <div id="topNav"> <div class="topNavWrap"> <div class="logo"><img src="images/logo.png" /></div> <div class="nav"> <ul id="mainNav"> <li><a href="#">Season '13 / '14</a></li> <li><a href="#">Reservations</a></li> <li><a href="#">International Prize for "The Naked Theatre"</a></li> <li><a href="#">Archive</a></li> <li><a href="#">Average</a></li> <li><a href="#">Contacts</a></li> </ul> <div class="CL"></div> </div> <div class="CL"></div> </div> </div> <!--BANNER NAV--> <div id="bannerNav"> <div class="bannerNavWrap"> <div class="container"> <div id="slides"> <img src="images/img-01.jpg" /> <img src="images/img-02.jpg" /> <img src="images/img-03.jpg" /> <img src="images/img-04.jpg" /> <a class="slidesjs-previous slidesjs-navigation" href="#"></a> <a class="slidesjs-next slidesjs-navigation" href="#"></a> </div> </div> </div> </div> <!--CONTENT NAV--> <div id="contentNav"> <div class="contentNavWrap"> <!--CONTENT LEFT NAV--> <div class="contentLeft"> <h2 class="withBG">LOREM IPSUM</h2> <h3 class='wdm'>13/9 - 29/9</h3> <h2 class="heading">DESCRIPTION</h2> <p>Negli anni precedenti NO'HMA ha svolto la sua densa, dina mica attività in luoghi vari e diversi della città, dai più presti Negli anni precedenti NO'HMA ha svolto la sua densa, dina mica attività in luoghi vari e diversi della città, dai più presti Negli anni precedenti NO'HMA ha svolto la sua densa, dina mica attività in luoghi vari e diversi della città, dai più presti Negli anni precedenti NO'HMA ha svolto la sua densa, dina mica attività in luoghi vari e diversi della città. </p> <div id="tabs"> <ul> <li><a href="#tabs-1"><span class='icon-mail'></span>Contact Us</a></li> <li><a href="#tabs-2"><span class='icon-users'></span>About Us</a></li> </ul> <div id="tabs-1"> <form class="contact-form" method="post" action=""> <p>Name <span class="your-name"><input type="text" aria-required="true" class="wdm_input" size="60" value="" name="your-name" /></span> </p> <p>Email <span class="your-email"><input type="email" aria-required="true" class="wdm_input" size="60" value="" name="your-email" /></span> </p> <p>Subject <span class="your-subject"><input type="text" class="wdm_input" size="60" value="" name="your-subject" /></span> </p> <p><input type="submit" class="wpcf7-form-control wpcf7-submit" value="Send" /></p> </form> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus.</p> </div> </div> </div> <!--CONTENT RIGHT NAV--> <div class="contentRight"> <h2 class="heading">SPECIAL FEATURES</h2> <div class="contxt"> <div class="bx"> <div class="icon video"></div> <p class="FL noMargin">GUARDA IL VIDEO PROMO: <br /> http://teatronohma/it/00007/4234/page.html</p> <div class="CL"></div> </div> <div class="bx padB20"> <div class="icon page"></div> <p class="FL noMargin">LEGGI LA RECENSIONE DELLO SPETTACOLO: <br /> http://teatronohma.tv/it/00007/4234/page.html</p> <div class="CL"></div> </div> <div class="bx"> <a href="#"><img src="images/btn.png" /></a> </div> <h2 class="heading">CREDITS</h2> <p class="padB20">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean </p> <h2 class="heading">INFO E PRENOTAZIONI</h2> <p>Per informazioni su biglietti e abbonamenti per i gruppi organiz zati, pomeridiane per le scuole, spettacoli educational, rivolgersi al Servizio Promozione Pubblico e Proposte Culturali. <br /> tel. 02 72.333.216 <br /> e-mail: promozione.pubblico@piccoloteatromilano.it</p> </div> </div> <div class="CL"></div> </div> </div> <!--FOOTER NAV--> <div id="footerNav"> <div class="footerNavWrap"> <div class="footerNavi"> <ul> <li><a href="#">Lavora con noi</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Media</a></li> <li><a href="#">Archivio</a></li> </ul> <ul> <li><a href="#">Note legali</a></li> <li><a href="#">Mappa del sito</a></li> <li><a href="#">Credits</a></li> <li><a href="#">Contatti</a></li> </ul> <div class="CL"></div> </div> </div> </div> </body> <script> $(document).ready(function () { $("#tabs").tabs(); $('#slides').slidesjs({ width: 1024, height: 369, navigation: true }); }); </script> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery UI選項卡不起作用 jQuery UI在選項卡中不起作用 jQuery UI選項卡效果不起作用 jQuery UI不起作用？ （特別是標簽） Javascript無法在加載Ajax的jQuery UI選項卡中運行 jQuery UI選項卡javascript單擊功能不起作用 jQuery的UI選項卡盲目效果不起作用 jQuery UI選項卡beforeLoad preventDefault不起作用 Jquery ui標簽與玉 使用Jquery的Tabs UI
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM