1. Zuhause
  2. Frage und Antwort
  3. jQuery Tabs ui funktioniert nicht

jQuery Tabs ui funktioniert nicht

2016-04-21 5 views
-1

Ich habe versucht mit jquery Ui für Tabs auf meiner Webseite, aber es gibt einen Fehler und ich kann es nicht debuggen.jQuery Tabs ui funktioniert nicht

Ich schaute auf einige der anderen Lösungen geschrieben und versuchte es alles ... immer noch nicht funktioniert .. bitte helfen Sie mit der entsprechenden Lösung.

HTML-Code

<!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: [email protected]</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>

Quelle

2016-04-21 Vishnuprasad Venugopal

+3

zu einem dom bereit Handler –

+0

ich Ihnen den Code Refactoring, bevor Sie Fragen posten Bewegen Sie Ihren Code empfehlen. – daremachine

Antwort

1 

<!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: [email protected]</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>

Quelle

2016-04-21 12:22:22

+0

danke sehr viel .. das hat funktioniert. –

1

Sie haben jquery enthalten zweimal: einmal in den Kopf und zweimal vor dem HTML-Tag schließen.

Quelle

2016-04-21 12:17:56

+0

ich entfernte die eine unter ... immer noch nicht funktioniert .. –

+0

post eine style-datei zu, ich kann die seite nicht richtig sehen ohne sie –

 Verwandte Themen

  • Keine verwandten Themen^_^