Question

我正在考虑使用html创建一些软件（以及其他任何有用的软件）。我是新手，但我确实知道我需要的一些UI元素。我已经成功尝试了其他一些UI项目（例如按钮），但无法获得选项卡式控件。我现在已经下载了一些示例，但它们似乎都表现不佳，因为标签控件没有显示，而是将标签显示为链接，然后显示所有链接后标签内的内容。没有像演示中的样本那样。

我确定这是由于演示中未说明的一些基本知识，但究竟是什么我不知道。我假设我可以将代码复制到本地文件中，然后将其加载到我的浏览器中。可能是一个糟糕的假设。

这里有一些我下载的代码不起作用，如果有帮助的话，可以随意建议另一个可以工作的网站＆＃34;＆＃34;＆＃34;或解释我需要设置什么来工作。我目前正在调查这是否可行且合理。我试图判断这将是多么困难，以决定我是否应该走这条路。

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>

Answer 1

请注意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>

HTML选项卡式控件

1 个答案: