I've encountered a strange issue with my script where it seems to stack up borders and display a 2px border instead of the intended 1px border when switching elements on click. Here is the link code I am using:
<li ><a href="plumbing.php">Plumbing</a></li>
The element causing trouble is shown below:
<div id="box1">
<ul class="tabs">
<li><a href="#" class="defaulttab" rel="tabs1">Tab #1</a></li>
<li><a href="#" rel="tabs2">Tab #2</a></li>
<li><a href="#" rel="tabs3">Tab #3</a></li>
</ul>
<div class="tab-content" id="tabs1">Tab #1 content</div>
<div class="tab-content" id="tabs2">Tab #2 content</div>
<div class="tab-content" id="tabs3">Tab #3 content</div>
</div>
The loaded element on the page is almost identical, except for having only one tab and corresponding content (for testing purposes).
Here is the CSS style being applied:
#box1{width:700px;height:100%;float:left;background:url(../images/box1bg_03.gif);background-repeat:repeat-x;border: 1px solid #d0ccc9;}
And here is the JavaScript in use:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('.navcontent li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #box1';
$('#box1').load(toLoad)
}
});
$('.navcontent li a').click(function(){
var toLoad = $(this).attr('href')+' #box1';
$('#box1').hide('fast',loadContent);
$('#load').remove();
$('#box1').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#box1').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#box1').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
Despite everything working as intended in theory, there seems to be an issue with the border as seen here: https://i.stack.imgur.com/qz7yk.jpg. Quite frustrating.