jQuery选项卡用户界面不起作用
Posted
技术标签:
【中文标题】jQuery选项卡用户界面不起作用【英文标题】：jQuery tabs ui not working 【发布时间】：2016-08-14 15:05:09 【问题描述】：我尝试在我的网页上使用 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>
【问题讨论】：
将您的代码移动到 dom 就绪处理程序 我建议您在发布问题之前重构代码。 【参考方案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: 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>【讨论】：
【参考方案2】：您已包含 jquery 两次：一次在 head 中，两次在 html 标记关闭之前。
【讨论】：
也发布一个样式文件，没有它我无法正确看到页面以上是关于jQuery选项卡用户界面不起作用的主要内容，如果未能解决你的问题，请参考以下文章
JQuery 验证问题：我在同一页面上有 2 个表单，每个表单在 2 个不同的选项卡中，但只有一个验证不起作用
在 UITabcontroller 中转到 3 选项卡不起作用