j查询选项卡未加载

jquery tabs not loading

本文关键字：加载 选项 查询      更新时间：2023-09-26

我正在尝试将jQuery选项卡添加到页面中。我不清楚我的代码在哪里中断。本网站使用其他 jQuery API，但 jQuery.noConflict（）;没有帮助。

我在这里错过了什么？

< link rel = "stylesheet"
href = "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" >
  < script src = "//code.jquery.com/jquery-1.10.2.js" > < /script>
<script src="/ / code.jquery.com / ui / 1.11.4 / jquery - ui.js "></script>
<script>
$(function() {
$( "#
tabs " ).tabs();
});
</script>
<p>Testing tab jQuery</p>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">TAB ONE</a>
    </li>
    <li><a href="#tabs-2">TAB TWO</a>
    </li>
    <li><a href="#tabs-3">TAB THREE</a>
    </li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate</p>
  </div>
</div>

刚刚将代码复制到 FIDDLE 中，并改进了您的代码1. 删除了一些空格并添加了包含 jquery 和 jquery-ui 脚本 src 属性的http:。2.$( "#tabs " ).tabs();将是一行。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by User86745458</title>      
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> 
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type='text/javascript'>
//<![CDATA[ 
$(window).load(function(){
$( "#tabs " ).tabs();
});
//]]> 
</script>
</head>
<body>
  <p>Testing tab jQuery</p>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">TAB ONE</a>
    </li>
    <li><a href="#tabs-2">TAB TWO</a>
    </li>
    <li><a href="#tabs-3">TAB THREE</a>
    </li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate</p>
  </div>
</div>
</body>
</html>
相关文章：