0
自分のファイルにページのセクションを作成しました。コードは次のようになります。既存のページで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>
は、いくつかの研究の後、それが表示されますが - 私は、既存のページに実行しているバージョンでは、私は、UIのJSへのリンクを追加する必要があります。
私はhttp://code.jquery.com/ui/1.9.1/jquery-ui.min.jsを追加しました。これは現在のjqueryと一致し、動作しなかったためです。私は1.12.1に切り替えました。これは私のテストページ（これはうまくいきます）にあるもので、動作しません。どのリンクが欠けていますか？
ブラウザのコンソールを確認 –
最初に確認したところ、それは完全に空です。 –