Question

我正在尝试将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>

Answer 1

只需将代码复制到FIDDLE，然后改进代码即可 1.删除一些空格并添加http:包括jquery和jquery-ui脚本src属性。 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>

jquery选项卡未加载

1 个答案: