JQuery選項卡 - 頁面內容加載時的樣式問題

我的頁面上的第一個選項卡包含很多內容，包括文本和圖片。JQuery選項卡 - 頁面內容加載時的樣式問題

這可能會導致視力問題：

一旦用戶加載頁面，一秒鐘，他會看到普通的HTML列表，而不是與背景的風格標籤。

事情是這樣的：

標籤中選擇一個
標籤兩個
標籤三個

所有的JavaScript和CSS加載在頭部分頁面頂部。

有沒有人知道這個問題的任何解決方案？

在此先感謝！

<script src="/js/jquery.ui/jquery-1.3.2.js" type="text/javascript"></script> 
<link rel="stylesheet" href="/css/ui.tabs.css" type="text/css"> 

<script src="/js/jquery.ui/ui/ui.core.js" type="text/javascript"></script> 
<script src="/js/jquery.ui/ui/ui.tabs.js" type="text/javascript"></script>

 <div id="container-1"> 
      <ul> 
       <li><a href="#fragment-1"><span>Tab One</span></a></li> 
       <li><a href="#fragment-2"><span>Tab Two</span></a></li> 
       <li><a href="#fragment-3"><span>Tab Three</span></a></li> 
      </ul> 
      <div id="fragment-1"> 

       !!!!!! A lot of html code and pictures here !!!!!! 

      </div> 
      <div id="fragment-2"> 
       some text 2 
      </div> 
      <div id="fragment-3"> 
       some text 3 
      </div> 

     </div>

來源

2010-05-03 Kelvin

粘貼JS使用以及請。 – XGreen 2010-05-03 19:12:46

你有沒有在你的CSS中設置你的ul有list-style-type：none; ？ – XGreen 2010-05-03 19:13:20

如果你有很多專門用ajax加載的html，除了試着去設計類似於js完成工作後的樣子的樣式之外，你不會有太多的選擇。它總是最好先把css放在後面，然後鏈接腳本。無論你做什麼，都不要用CSS隱藏事情，並讓它們以JS出現，除非你確定沒有任何殘疾人會查看你的頁面。或者你不想支持沒有js的人 – XGreen 2010-05-03 19:17:29

第二個用戶將看到一個常規列表是時間的jQuery的量和標籤插件需要初始化自己。你將無法在那段時間做很多事情。

但是，您可以自己設計<li>元素，從一開始就讓它們看起來很好。

打開瀏覽器窗口並等待選項卡正確顯示。現在打開開發人員工具，並找出哪些CSS類別由選項卡擴展名分配給<ul>/<li>/<div>元素。

在基礎HTML中正確指定這些類。完成。

來源

2010-05-03 19:18:17 Tomalak

請勿一次加載所有內容。 jQuery UI標籤可以通過AJAX加載額外的內容。

替代方法先隱藏內容，然後再通過jQuery顯示它。

來源

2010-05-03 19:25:02

感謝您對Christian的評論。這個想法不是使用AJAX來加載內容，而是一次加載。否則你的建議也會起作用。 – Kelvin 2010-05-03 19:43:27

試試：

$(function() { 
    $("#container-1").tabs(); 
});

來源

2012-09-24 09:53:17 RDK

不要只是發佈代碼作爲答案。試着給出一些解釋。 – 2012-09-24 12:42:27

JQuery選項卡 - 頁面內容加載時的樣式問題

回答

相關問題