使用不同樣式的Javascript返回元素？

我有一個腳本隱藏一個元素及其內容，並單擊加載另一個元素及其內容。奇怪的是，它似乎堆積在1px寬的邊框，並返回一個2px的邊框的第二個元素，同時表現出它仍然有1使用不同樣式的Javascript返回元素？

這是鏈接代碼：

<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。很煩人。

來源

2012-06-26 styke

jQuery load將內容插入到指定的容器中。所以我的猜測是，即使你用相同的'元素'代替了#box1中的內容，你只需在新內容中填入#box1的內部即可。你實際上並沒有取代#box1的邊框，導致它翻倍。

Idk如果我的解釋有意義。基本上你把#box1放在#box1，但是兩個邊框仍然可見。我會嘗試將邊框移動到包裝元素。我希望這有幫助。

來源

2012-06-26 22:31:06

完美的感覺，謝謝。我只是將＃box1的內容封裝到另一個名爲＃box1content的div中，雖然它沒有爲整個元素創建一個花哨的動畫，但內容按需要起作用。它似乎很多的定位和JQuery的問題可以通過在額外divs包裝解決。 – styke

哈哈。同意。祝你的項目好運。 –

通過做一些改動修正：

<div id="box1"> 
     <div id="box1content"> //wrap up in extra div 
      <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> 
    </div>

做出相應的修正代碼：

$(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 #box1content';//change to fixed div 
      $('#box1content').load(toLoad)//change to fixed div 
     }           
    }); 

    $('.navcontent li a').click(function(){ 

     var toLoad = $(this).attr('href')+' #box1content';//change to fixed div 
     $('#box1content').hide('fast',loadContent);//change to fixed div 
     $('#load').remove(); 
     $('#box1content').append('<span id="load">LOADING...</span>');//change to fixed div 
     $('#load').fadeIn('normal'); 
     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
     function loadContent() { 
      $('#box1content').load(toLoad,'',showNewContent())//change to fixed div 
     } 
     function showNewContent() { 
      $('#box1content').show('normal',hideLoader());//change to fixed div 
     } 
     function hideLoader() { 
      $('#load').fadeOut('normal'); 
     } 
     return false; 

    }); 

});

最終的結果是，動畫是一個有點不同，只有文字是衰落並且出來，但是它完成了這項工作。

來源

2012-06-26 23:08:33 styke

使用不同樣式的Javascript返回元素？

回答

相關問題