How do I get Jquery tabs to work on my existing page?
Question
I created a section of a page in its own file. The code looks like-
<!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>
Everything works fine. I try to add it to my homepage and it doesn't work. My guess as to the reason is that it is a different version of jquery. The versions that I am running on the existing page is-
<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>
After some research it appears I need to add a link to the ui js.
I added http://code.jquery.com/ui/1.9.1/jquery-ui.min.js because that is what matches the current jquery and it didn't work. I switched to 1.12.1 which is what I have on my test page( that works fine) and it doesn't work. Which link am I missing?
1 answers
solution1
0 2016-12-14 20:23:51
This is from a Magento website that uses prototype js. When I switched the $ for jquery it worked!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.