Question

我在自己的文件中创建了一个页面的一部分。代码看起来像 -

 <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Test</title>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="css/styles.css" rel="stylesheet">
  <script>
  $( function() {
    $( "#tabs" ).tabs({
      event: "mouseover"
    });
  } );
  </script>
</head>
<body style="font-family: 'Open Sans', sans-serif;">
<div style="height:400px; background-color: rgba(0, 0, 0,); background-image: url(images/Warehouse.png)"> 
  <div style="width:1024px; height:400px; margin:auto; background-color:rgba(0, 0, 0,0.8)">
      <div id="tabs" style="">
        <ul style="list-style:none; float:left;">
          <li><a href="#tabs-1"><img src=images/tealcircle_words.png style="height:130px;"></a></li>
          <li><a href="#tabs-2"><img src=images/GRNCircle_words.png style="height:120px;"></a></li>
          <li><a href="#tabs-3"><img src=images/orangecircle_words.png style="height:120px;"></a></li>
        </ul>
        <div id="tabs-1" style="float:left; color:#fff; padding-top:100px;font-size:32px; padding-left:15%;">
          <p style="text-align:center;">Easily find all of your application needs!</p>
          <div class="ctabutton" style="width:150px; background-color:transparent; border-style: solid; border-width: 1px; background-color:#006666; color:#fff;font-size: 20px;text-decoration: none; font-weight:200; letter-spacing:2px; margin:auto; padding:8px 20px; text-align:center; top:200px; margin-left:125px;">View All</div>
        </div>
        <div id="tabs-2" style="float:left; color:#fff; padding-top:100px;font-size:32px; padding-left:25%;">
          <p style="text-align:center;">Our outside salesforce works closely <br />with our local OEM customers</p>
          <div class="ctabutton" style="width:150px; background-color:transparent; border-style: solid; border-width: 1px; background-color:#8dc63f; color:#fff; font-size: 16px;text-decoration: none; font-weight:200; letter-spacing:2px; margin:auto; padding:8px 20px; text-align:center; top:200px; margin-left:125px;">Meet the Team</div>
        </div>
        <div id="tabs-3" style="float:left; color:#fff; padding-top:100px;font-size:32px; padding-left:15%;">
          <p style="text-align:center;">Our UL508 shop can do everything from <br />product modifications to designing a panel</p>
          <div class="ctabutton" style=" width:150px; background-color:transparent; border-style: solid; border-width: 1px; background-color:#dd762a; color:#fff; font-size: 20px;text-decoration: none; font-weight:200; letter-spacing:2px; margin:auto; padding:8px 20px; text-align:center; top:200px; margin-left:125px;">Quick Quote</div>
        </div>
      </div>
  </div>
</div>
</body>
</html>

一切正常。我尝试将其添加到我的主页，但它不起作用。我猜的原因是它是jquery的不同版本。我在现有页面上运行的版本是 -

<script type="text/javascript" src="http://www.dev-wolfautomation.com/js/jquery/jquery.1.9.1.min.js"></script>

<script type="text/javascript" src="http://www.dev-wolfautomation.com/js/jquery/jquery.noConflict.js"></script>

经过一些研究后，似乎我需要添加一个指向ui js的链接。

我添加了http://code.jquery.com/ui/1.9.1/jquery-ui.min.js，因为这与当前的jquery匹配，但它不起作用。我切换到1.12.1，这是我在测试页面上的内容（工作正常），但它不起作用。我错过了哪个链接？

Answer 1

这是来自使用原型js的Magento网站。当我切换$ for jquery时它起作用了！

如何让Jquery选项卡在我现有的页面上运行？

1 个答案: