如何讓Jquery選項卡在我的現有頁面上工作？

我在自己的文件中創建了一個頁面的一部分。代碼看起來像 -如何讓Jquery選項卡在我的現有頁面上工作？

<!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>

經過一番研究，它出現的版本，我需要一個鏈接添加到用戶界面JS。

我加了http://code.jquery.com/ui/1.9.1/jquery-ui.min.js，因爲那是匹配當前的jquery，它沒有工作。我切換到了我的測試頁上的1.12.1（工作正常），但它不起作用。我錯過了哪個鏈接？

來源

2016-12-14 Tyler Jensen

檢查您的瀏覽器控制檯 –

我檢查的第一件事，它是完全空的。 –

這是來自使用原型js的Magento網站。當我切換$ jquery時，它就起作用了！

來源

2016-12-14 20:23:51

如何讓Jquery選項卡在我的現有頁面上工作？

回答

相關問題