JQuery UI не работает - PullRequest
Новая
       0

JQuery UI не работает

0 голосов
/ 05 марта 2012

Я пытаюсь сделать некоторые вкладки с помощью интерфейса Jquery.

Мой HTML выглядит так ... 

<html>

<head>

    <!--use for jquery-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

    <!--external javascript source-->
    <script type= "text/javascript" src= "javascript/home_scripts.js"> </script>

    <!--css-->
    <link rel="stylesheet" type="text/css" href="css/homepage.css" />


</head>

<body>

    <ul class="tabs">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>

    <div class="panes">
        <div>First tab content. Tab contents are called "panes"</div>
        <div>Second tab content</div>
        <div>Third tab content</div>
    </div>




</body>


</html>

и мой файл JavaScript выглядит так 

$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});

Проблема в том, что при загрузке страницы нет вкладок.Похоже на это 

Tab 1
Tab 2
Tab 3
First tab content. Tab contents are called "panes"
Second tab content
Third tab content

Что я сделал не так?Я старался следовать этому уроку как можно лучше.

Ответы [ 2 ]

0 голосов
/ 05 марта 2012

Измените разметку на: 

<div class="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">First tab content. Tab contents are called "panes"</div>
    <div id="tab2">Second tab content</div>
    <div id="tab3">Third tab content</div>
</div>

и ваш JavaScript на: 

$(function () {
    $("div.tabs").tabs();
});

Функция .tabs() не принимает селектор в качестве параметра.Он использует innerHTML структуру выбранного элемента для создания вкладок.В идеале href на ваших якорях должно указывать на id на соответствующей "панели"

0 голосов
/ 05 марта 2012 
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});

Это анонимная функция.Поэтому, когда страница загружается, браузер не сможет распознать это, так как вы не вызываете эту функцию в любом случае ... Так что, вероятно, может работать один из двух возможных методов .. 

$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
})();

или 

$(document).ready(function(){
$("ul.tabs").tabs("div.panes > div");
});

должно работать.Я не уверен, хотя.Должен проверить это.Но похожая логика должна работать.А также вы не включили файл jquery.ui.js в свою HTML-страницу.Я полагаю, вы забыли включить его в образец, который вы разместили здесь.В противном случае это огромный облом для меня: P:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...