JQuery UI вкладки не работают - PullRequest
Новая
       9

JQuery UI вкладки не работают

5 голосов
/ 08 марта 2011

У меня есть следующий скрипт, который не работает.следует использовать вкладки jquery, но по какой-то причине ссылки не преобразуются во вкладки: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

    <script type="text/javascript" language="javascript"> 
        $(document).ready(function(){
            $( "#tabs" ).tabs();
        });
    </script>

</head>
<body>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, </p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus </p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. </p>
    </div>
</div>
</body>
</html>

1 Ответ

0 голосов
/ 08 марта 2011

Для вашего документа в jsfiddle вам нужно ввести страницу в формате, который ожидает Fiddle.Только HTML на панели HTML и только JS на панели Javascript.Ваш HTML должен включать только то, что входит в элемент body.Ваш JS должен включать только то, что идет внутри тега script.Вы не должны включать элементы DOCTYPE, body или html.Вы не должны включать сам тег сценария.См. Документы здесь: http://doc.jsfiddle.net/basic/introduction.html#entering-code. Код будет работать, если вы сделаете это.

Как только вы это сделаете, вам нужно только включить / указать правильный CSS, который выполняет стилизацию, и он будет отображатьсякак интерфейс с вкладками.Для вашего автономного документа это все, что нужно сделать.

...