jquery ui not working

Я пытаюсь сделать некоторые вкладки с JQuery ui.jquery ui not working

Мой 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

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

источник

2012-03-05 Zack

ссылаетесь на библиотеку jquery ui где угодно? – Jesse

где и как я это сделаю? – Zack

Поскольку вы включили библиотеку jQuery, вам также необходимо включить библиотеку jQuery-UI. –

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

<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 на соответствующей «панели»

источник

2012-03-05 02:14:54 pete

$(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 :)

источник

2012-03-05 01:45:18 Ajai

как я включаю это? Я не включил его – Zack

Вы можете включить это. Simillar для размещения jquery google также содержит jqueryui. – Ajai

jquery ui not working

ответ

Смежные вопросы