I've designed a webpage with tabs, and everything was working fine in our development environment. However, when we moved it to the staging environment, we started experiencing errors this morning that I'm not sure how to resolve as my JavaScript knowledge is limited.
Here's the error message:
Ext is not defined
[Break On This Error]
Ext.get(newboxes[x].id+"_href").removeClass("selected");
Below is the script causing the issue:
<script language="javascript">
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
Ext.get(newboxes[x].id+"_href").addClass("selected");
} else {
newboxes[x].style.display = 'none';
Ext.get(newboxes[x].id+"_href").removeClass("selected");
}
}
}
}
</script>
And here is the code structure:
<!-- Tabs section starts -->
<div class="fulltab">
<div class="tabheader">
<ul class="tabs">
<li><a id="tab01_href" href="javascript:showonlyone('tab01');" class="selected">Applications</a></li>
<li><a id="tab02_href" href="javascript:showonlyone('tab02');" >Features</a></li>
<li><a id="tab03_href" href="javascript:showonlyone('tab03');" >Testimonials</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="contentDiv">
<div class="tab-content-wrap" style="background: url(../images/block3.png) no-repeat;">
<div name="newboxes" id="tab01" class="tab-content" style="display: block;">
<br /><br />
<img class="alignleft" style="float:left; margin:5px 11px;border:1px solid #6B6B6B;" src="../images/tt_ss.jpg" alt="" width="400px" /><br />
<u><b>STUFF</b></u>
<ul style="margin-left:440px;list-style-type:disc;padding:0;margin-top:0;">
<li>STUFF</li>
<li>STUFF</li>
<li>STUFF</li>
</ul>
</div>
<div name="newboxes" id="tab02" class="tab-content" style="display: none;">
<div style="margin-left:10px; width:700px;">
<br /><br />
<strong>STUFF</strong><br />
<ul style="margin-left:10px; margin-top:0px;list-style-type:disc;padding: 0;">
<li>STUFF</li>
<li>STUFF</li>
</ul>
</div>
</div>
<div name="newboxes" id="tab03" class="tab-content" style="display: none;">
<div style="padding-right:25px;padding-top:10px;">
<ul>
<p>STUFF</p>
<p>STUFF</p>
</ul>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<!-- Tabs End -->
I could really use some assistance with this situation!