要素とそのコンテンツを非表示にし、クリック時に別の要素とそのコンテンツをロードするスクリプトがあります。奇妙なことに、1px の境界線を積み重ねるように見え、2px の境界線を持つ 2 番目の要素を返しますが、まだ 1 があることを示しています。
これはリンクコードです:
<li ><a href="plumbing.php">Plumbing</a></li>
これは問題の要素です:
<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>
読み込まれるページ上の要素は、1 つのタブと 1 つのタブ コンテンツ (テスト目的) しかないことを除いて同一です。
スタイル:
#box1{width:700px;height:100%;float:left;background:url(../images/box1bg_03.gif);background-repeat:repeat-x;border: 1px solid #d0ccc9;}
Javascript:
$(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;
});
});
理論的には、境界を除いてすべてが完全に機能します - http://imgur.com/a/isqgH。とてもうるさい。