I'm working on a website that has a jQuery hosted on their server using version v3.6.0 in WordPress. I worked on a new section and my code works fine with jQuery hosted on Google, but not the version on their website. I downloaded their jQuery and jQuery migrate so I can try to trouble shoot it. I can't figure out how to change my functions so they work.
Here is my working file that works using the jQuery on Google: https://waynegoodman.com/jquery-issue/art-works.html
Here is my working file using the jQuery versions downloaded from their website: https://waynegoodman.com/jquery-issue/art-does-not-work.html
I thought it was a conflict issue, but since I isolated the code, I don't think that is the problem. Does anyone know what I am doing wrong?
CodePudding user response：
Try replace $('#tabs-0-link').click(); to jQuery('#tabs-0-link').click(); in all your links html
don't use $ in onclick attribute
.trainingWidget {position: relative;max-width: 700px; padding: 0 2%; border: 4px solid #114577; margin: 42px auto; background: #eef6f9; -webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px; }
.trainingWidget h2 {font-size: 1em;position: absolute; top: 0; left: 0; right: 0;text-align: center; padding: 22px 0 18px 0; color: #fff; background: #114577; text-transform:uppercase }
.trainingTable, .trainingTable img {width: 100%; height: auto}
.tableContain { height: auto; margin: 32px auto}
.tableContain2 { margin:81px auto 0 auto; padding:0 0 }
.trainingNav {display: none}
.trainingTableTR1 {vertical-align: top}
.trainingTableTR2 {vertical-align: top}
.n0 {background: url('https://waynegoodman.com/jquery-issue/images/Art_04.png') no-repeat; background-size: 100%}
.n1 {background: url('https://waynegoodman.com/jquery-issue/images/Art_01.png') no-repeat; background-size: 100%}
.n2 {background: url('https://waynegoodman.com/jquery-issue/images/Art_02.png') no-repeat; background-size: 100%}
.n3 {background: url('https://waynegoodman.com/jquery-issue/images/Art_03.png') no-repeat; background-size: 100%}
.n4 {background: url('https://waynegoodman.com/jquery-issue/images/Art1_04a.png') no-repeat; background-size: 100%}
.n0:hover, .n0.active {background: url('https://waynegoodman.com/jquery-issue/images/ArtO_00.png') no-repeat; background-size: 100%}
.n1:hover, .n1.active {background: url('https://waynegoodman.com/jquery-issue/images/ArtO_01.png') no-repeat; background-size: 100%}
.n2:hover, .n2.active {background: url('https://waynegoodman.com/jquery-issue/images/ArtO_02.png') no-repeat; background-size: 100%}
.n3:hover, .n3.active {background: url('https://waynegoodman.com/jquery-issue/images/ArtO_03.png') no-repeat; background-size: 100%}
.n4:hover, .n4.active {background: url('https://waynegoodman.com/jquery-issue/images/ArtO_04a.png') no-repeat; background-size: 100%}
.trainingBox {min-height:300px; padding: 22px 5% 36px 5%; position: relative ; border:1px solid #ccc; margin:18px auto 0 auto; background:#fff; -webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;
-webkit-box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.44); box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.44);}
.trainingBtmNav {left: 0; right: 0; margin: auto;font-size: .9em; display:block; position:absolute; bottom:18px; text-align:center; }
.trainingBtmNav a {text-decoration: none; margin: 22px auto; color: #114577}
.trainingBtmNav a:hover {color: #3e7584;}
.pipe9 {color: #3e7584; margin: 0 8px; position: relative;}
.trainingCols {}
.trainingCol1 {margin: 0 auto 8px auto;max-width: 90%; height: auto; padding:0 0 0 0; text-align:center }
.trainingCol1 img {max-width: 100px; margin: auto}
.trainingCol2 {max-width: 100%; height: auto; padding: 0 0 0 0; }
.trainingCol2 p {margin: 0 0 8px 0; line-height: 130%; font-size: .9em}
.trainingCol2 .topLine {margin: 0 0 3px 0;text-align: center; font-weight: bold;font-size: .95em; text-transform:uppercase; color:#114577}
.trainingCol2 h3 {text-align: center; font-size: 1.2em; line-height: 110%; margin: 0 0 11px 0; color:#114577; text-transform:uppercase }
@media only screen and (min-width: 400px) {
.trainingWidget h2 {font-size: 1.4em;}
}
@media only screen and (min-width: 600px) {
.trainingBox {padding: 32px 5% 36px 5%;}
.trainingCol2 .topLine {margin: 0 0 1px 0;}
.trainingWidget h2 {font-size: 1.6em;}
.trainingCols {display: flex; flex-direction: row; flex-wrap: wrap;}
.trainingCol1 {max-width: 22%; height: auto; padding:0 3% 0 0 }
.trainingCol1 img {max-width: 100% !important;}
.trainingCol2 {max-width: 73%; height: auto; padding: 0 0 0 2%; }
.trainingCol2 h3 {text-align: left !important}
.trainingCol2 .topLine {text-align: left;}
.tableContain2 { margin:81px auto 0 auto; padding:0 8% }
.trainingBox {min-height:230px;}
}<html>
<head>
<title>Art1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel='stylesheet' id='bancroft-style-css' href='https://www.bancroft4vets.com/wp-content/themes/bancroft/style.css?ver=5.8.1' type='text/css' media='all' />
</head>
<body bgcolor="#fff">
<div class="trainingWidget">
<h2>Veteran Training Program</h2>
<div class="tableContain" id="tabs">
<ul class="trainingNav">
<li><a href="#tabs-0" id="tabs-0-link">Tab0</a></li>
<li><a href="#tabs-1" id="tabs-1-link">Tab1</a></li>
<li><a href="#tabs-2" id="tabs-2-link">Tab2</a></li>
<li><a href="#tabs-3" id="tabs-3-link">Tab3</a></li>
<li><a href="#tabs-4" id="tabs-4-link">Tab4</a></li>
</ul>
<div class="tableContain2">
<table class="trainingTable" border="0" cellpadding="0" cellspacing="0">
<tr class="trainingTableTR1">
<td class="n1 trainingTD">
<a href="#"><img src="https://waynegoodman.com/jquery-issue/images/artTrans_01.png" onclick="if (!window.__cfRLUnblockHandlers) return false; jQuery('#tabs-1-link').click();" width="283" height="305" alt="" data-cf-modified-4410b37bc9d88d4f4d18db14-=""></a></td>
<td class="n2 trainingTD">
<a href="#"><img src="https://waynegoodman.com/jquery-issue/images/artTrans_02.png" onclick="if (!window.__cfRLUnblockHandlers) return false; jQuery('#tabs-2-link').click();" width="235" height="305" alt="" data-cf-modified-4410b37bc9d88d4f4d18db14-=""></a></td>
<td class="n3 trainingTD">
<img src="https://waynegoodman.com/jquery-issue/images/artTrans_03.png" onclick="if (!window.__cfRLUnblockHandlers) return false; jQuery('#tabs-3-link').click();" width="282" height="305" alt="" data-cf-modified-4410b37bc9d88d4f4d18db14-=""></td>
</tr>
<tr class="trainingTableTR2">
<td class="n0 trainingTD">
<img src="https://waynegoodman.com/jquery-issue/images/artTrans_04.png" onclick="if (!window.__cfRLUnblockHandlers) return false; jQuery('#tabs-0-link').click();" width="283" height="236" alt="" data-cf-modified-4410b37bc9d88d4f4d18db14-=""></td>
<td>
<img src="https://waynegoodman.com/jquery-issue/images/art_center.png" width="235" height="236" alt="">
</td>
<td class="n4 trainingTD">
<img src="https://waynegoodman.com/jquery-issue/images/artTrans_06.png" onclick="if (!window.__cfRLUnblockHandlers) return false; jQuery('#tabs-4-link').click();" width="282" height="236" alt="" data-cf-modified-4410b37bc9d88d4f4d18db14-=""></td>
</tr>
</table>
</div>
<div class="trainingBox">
<div id="tabs-0">
<div class="trainingCols">
<div class="trainingCol1"><img src="https://waynegoodman.com/jquery-issue/images/icons/objective.png"></div>
<div class="trainingCol2">
<div class="topLine">VTP</div>
<h3>Objective</h3>
<p>The objective of the Veteran Training Program (“VTP”) is to offer an integrated network of support, academic & real-life education, through which a disabled veteran may develop the foundation of knowledge capable of supporting a career in institutional finance.</p>
</div>
</div>
<div class="trainingBtmNav"><a href="#" id="nextBtn0" onclick="if (!window.__cfRLUnblockHandlers) return false; jQuery('#tabs-1-link').click();" data-cf-modified-4410b37bc9d88d4f4d18db14-="">NEXT » </a></div>
</div>
<div id="tabs-1">
<div class="trainingCols">
<div class="trainingCol1"><img src="https://waynegoodman.com/jquery-issue/images/icons/phase1.png"></div>
<div class="trainingCol2">
<div class="topLine">Phase 1</div>
<h3>ACADEMIA (60 Days)</h3>
<p>Candidates will transition from military and other obligations to Bancroft, at which point they will study for and complete all FINRA entry-level exams. Candidates will virtually meet weekly with recent graduate trainees via Zoom to define discuss the candidate’s role in corporate and municipal meetings; and conduct trial runs on speaking at corporate meetings. All candidates should be trained in and familiar with Microsoft, One Note, Zoom, Bloomberg, and e-mail correspondence prior to moving to the next phase.</p>
</div>
</div>
<div class="trainingBtmNav"><a href="#" id="prevBtn1" onclick="if (!window.__cfRLUnblockHandlers) return false; jQuery('#tabs-0-link').click();" data-cf-modified-4410b37bc9d88d4f4d18db14-="">« PREVIOUS</a> <span class="pipe9">|</span> <a href="#" id="nextBtn1" onclick="if (!window.__cfRLUnblockHandlers) return false; jQuery('#tabs-2-link').click();" data-cf-modified-4410b37bc9d88d4f4d18db14-="">NEXT »</a></div>
</div>
<div id="tabs-2">
<div class="trainingCols">
<div class="trainingCol1"><img src="https://waynegoodman.com/jquery-issue/images/icons/phase2.png"></div>
<div class="trainingCol2">
<div class="topLine">Phase 2</div>
<h3>ON-THE-JOB TRAINING (8 Weeks)</h3>
<p>Phase Two of the VTP offers candidates an introduction to each of the five business units that Bancroft operates and the products/services we deliver to our clients. VTP Candidates will rotate across eight desks, spending one week each on the respective desk as they receive an introduction to each product/service. Each week will conclude with a 360° evaluation – Candidate of Instructor(s) & Instructor(s) of Candidate.</p>
</div>
</div>
<div class="trainingBtmNav"><a href="#" id="prevBtn2" onclick="if (!window.__cfRLUnblockHandlers) return false; jQuery('#tabs-1-link').click();" data-cf-modified-4410b37bc9d88d4f4d18db14-="">« PREVIOUS</a> <span class="pipe9">|</span> <a href="#" id="nextBtn2" onclick="if (!window.__cfRLUnblockHandlers) return false; jQuery('#tabs-3-link').click();" data-cf-modified-4410b37bc9d88d4f4d18db14-="">NEXT »</a></div>
</div>
<div id="tabs-3">
<div class="trainingCols">
<div class="trainingCol1"><img src="https://waynegoodman.com/jquery-issue/images/icons/phase3.png"></div>
<div class="trainingCol2">
<div class="topLine">Phase 3</div>
<h3>CAREER PATH (Remainder of Year 1)</h3>
<p>Based on the evaluation of a candidate’s skills and the candidate’s choice of product or service, a structured work program for an extended internship may be formulated. Candidates and management will determine revenue expectations, service accomplishments, and formulate personal goals. Candidates will make calls to clients in partnership with a product/service manager. Peer evaluations and weekly mentoring discussions will be held with all past graduates of the program and current trainees.</p>
</div>
</div>
<div class="trainingBtmNav"><a href="#" id="prevBtn3" onclick="if (!window.__cfRLUnblockHandlers) return false; jQuery('#tabs-2-link').click();" data-cf-modified-4410b37bc9d88d4f4d18db14-="">« PREVIOUS</a> <span class="pipe9">|</span> <a href="#" id="nextBtn3" onclick="if (!window.__cfRLUnblockHandlers) return false; $('#tabs-4-link').click();" data-cf-modified-4410b37bc9d88d4f4d18db14-="">NEXT »</a></div>
</div>
<div id="tabs-4">
<div class="trainingCols">
<div class="trainingCol1"><img src="https://waynegoodman.com/jquery-issue/images/icons/phase4.png"></div>
<div class="trainingCol2">
<div class="topLine">Phase 4</div>
<h3>REVENUE GENERATION <br>
BUSINESS SUPPORT <br>(2 Years)</h3>
<p>Individual account assignment or product responsibilities will be established in an employment position and weekly progress reports will drafted by product or service. Mentoring will continue biweekly as scheduled in advance by candidate-graduate.</p>
</div>
</div>
<div class="trainingBtmNav"><a href="#" id="prevBtn4" onclick="if (!window.__cfRLUnblockHandlers) return false; jQuery('#tabs-3-link').click();" data-cf-modified-4410b37bc9d88d4f4d18db14-="">« PREVIOUS</a></div>
</div>
</div>
</div>
</div>
<script src='https://waynegoodman.com/jquery-issue/jquery.min.js'></script>
<script src='https://waynegoodman.com/jquery-issue/jquery-migrate.min.js' id='jquery-migrate-js'></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
<script>
jQuery(function($){
$(function() {
$( "#tabs" ).tabs();
});
});
jQuery(function($){
$(".trainingTD").click(function () {
event.preventDefault();
// If the clicked element has the active class, remove the active class from EVERY .nav-link>.state element
if ($(this).hasClass("active")) {
$(".trainingTD").removeClass("active");
}
// Else, the element doesn't have the active class, so we remove it from every element before applying it to the element that was clicked
else {
$(".trainingTD").removeClass("active");
$(this).addClass("active");
}
});
});
jQuery(function($){
$("#nextBtn0").click(function() {
event.preventDefault();
$(".n1").addClass('active');
$(".n0").removeClass('active');
$(".n2").removeClass('active');
$(".n3").removeClass('active');
$(".n4").removeClass('active');
});
$("#nextBtn1").click(function() {
event.preventDefault();
$(".n2").addClass('active');
$(".n0").removeClass('active');
$(".n1").removeClass('active');
$(".n3").removeClass('active');
$(".n4").removeClass('active');
});
$("#nextBtn2").click(function() {
event.preventDefault();
$(".n3").addClass('active');
$(".n1").removeClass('active');
$(".n2").removeClass('active');
$(".n4").removeClass('active');
$(".n0").removeClass('active');
});
$("#nextBtn3").click(function() {
event.preventDefault();
$(".n4").addClass('active');
$(".n1").removeClass('active');
$(".n2").removeClass('active');
$(".n3").removeClass('active');
$(".n0").removeClass('active');
});
$("#prevBtn1").click(function() {
event.preventDefault();
$(".n0").addClass('active');
$(".n1").removeClass('active');
$(".n2").removeClass('active');
$(".n3").removeClass('active');
$(".n4").removeClass('active');
});
$("#prevBtn2").click(function() {
event.preventDefault();
$(".n1").addClass('active');
$(".n0").removeClass('active');
$(".n2").removeClass('active');
$(".n3").removeClass('active');
$(".n4").removeClass('active');
});
$("#prevBtn3").click(function() {
event.preventDefault();
$(".n2").addClass('active');
$(".n0").removeClass('active');
$(".n1").removeClass('active');
$(".n3").removeClass('active');
$(".n4").removeClass('active');
});
$("#prevBtn4").click(function() {
event.preventDefault();
$(".n3").addClass('active');
$(".n0").removeClass('active');
$(".n2").removeClass('active');
$(".n1").removeClass('active');
$(".n4").removeClass('active');
});
});
</script>
<script src="https://waynegoodman.com/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="4410b37bc9d88d4f4d18db14-|49" defer=""></script></body>