HTML選項卡式控件

我正在尋找創建一些軟件使用HTML（和其他任何幫助）。我是新手，但我確實知道一些我需要的UI元素。我嘗試了一些成功的其他UI項目（例如按鈕），但無法獲得選項卡式控件。我現在已經下載了幾個樣本，但它們似乎都表現得很差，因爲標籤控件沒有顯示，而是將標籤顯示爲鏈接，然後顯示所有鏈接後標籤內的內容出現。沒有什麼像演示中的示例。HTML選項卡式控件

我敢肯定，這是由於一些在演示中沒有用到的基本知識，但是我完全不知道。我假設我可以將代碼複製到本地文件中，然後將其加載到我的瀏覽器中。可能是一個糟糕的假設。

下面是一些我下載不起作用的代碼，如果有幫助，但可以隨意建議另一個可以「按原樣」工作的站點，或者解釋我需要設置的工作。我目前正在調查這是否可行和合理。我試圖衡量這將是多麼困難，以決定我是否應該走下去。

thx。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Tabs - Content via Ajax</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script> 
    $(function() { 
     $("#tabs").tabs({ 
      beforeLoad: function(event, ui) { 
       ui.jqXHR.error(function() { 
        ui.panel.html(
         "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
         "If this wouldn't be a demo."); 
       }); 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Preloaded 1</a></li> 
     <li><a href="#tabs-2">Preloaded 2</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>1: Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. 

Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna 

quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius 

sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
    </div> 
    <div id="tabs-2"> 
     <p>2: Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. 

Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna 

quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius 

sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
    </div> 
</div> 


</body> 
</html>

來源

2014-10-30 Mitch

注意沒有從你的jQuery引用http:和樣式表：不要求：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

來源

2014-10-30 23:12:09

的遺漏協議字段（''HTTP）。如果省略，瀏覽器將使用與用於獲取頁面的協議相同的協議。 – 2014-10-30 23:13:25

其實他們並沒有失蹤。它被視爲協議不可知的網址，您可以在這裏閱讀[@ paul-irish]（http://stackoverflow.com/users/89484/paul-irish）上有關它的更多信息：http：//www.paulirish。 com/2010/the-protocol-relative-url/ – HJ05 2014-10-30 23:15:30

如果文件是通過Web服務器訪問的，則這是正確的，但如果直接從文件系統打開該文件則不正確。由於他是「新手」，很可能他只是在玩弄一些HTML，而沒有設置Web服務器的麻煩。它試圖通過file：//加載引用。 – 2014-10-30 23:24:18

HTML選項卡式控件

回答

相關問題