Вкладки jQuery не отображаются так, как ожидалось

Question

Я пытаюсь разместить много контента на вкладках jquery, чтобы он выглядел лучше, но все, что я пытаюсь, не работает, и я остаюсь с несколькими точками маркера всеми дивизиями. Я рассмотрел все вопросы, которые я могу найти, и применил изменения и т. Д., Но он все еще не имеет этого. Кроме того, я скопировал пример с сайта jquery в текстовый редактор и открыл его, но их собственный пример также не отображается должным образом.

<meta charset="utf-8" /> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script> 

<style type="text/css"> 

body { 
    font-family:verdana, helvetica; 
    font-size:0.8em; 
} 


</style> 

<div> 
    <p>intro </p> 
</div> 

<div id="biography"> 
    <ul> 
     <li><a href="#one"><span>one</span></a></li> 
     <li><a href="#two"><span>two</span></a></li> 
     <li><a href="#three"><span>three</span></a></li> 
     <li><a href="#four"><span>four</span></a></li> 
     <li><a href="#five"><span>five</span></a></li> 
    </ul> 

<div id="one"> 
    <p>text</p> 
</div> 

<div id="two"> 
    <p>text</p> 
</div> 

<div id="three"> 
    <p>text</p> 
</div> 

<div id="four"> 
    <p>text</p> 
</div> 

<div id="five"> 
    <p>text</p> 
</div> 

</div> 

<script> 
    $("biogaphy").tabs(); 
</script> 

Я все еще довольно новый на все это, так что я мог бы быть что-то очевидное отсутствует. Я попытался удалить css, который устанавливает шрифт, и это не сработает, и, как я уже сказал, я запустил example с сайта и не отображался в виде вкладок. Я попытался открыть его в chrome, firefox и т. Д., Но все они отображаются одинаково. Я загрузил его на свой сайт, чтобы узнать, работает ли он в режиме реального времени, но ничего не делает. Кто-нибудь может мне помочь?!

Заранее благодарен!

Answer 1

Есть пара проблем. Во-первых, добавить «#» на ваш селектор, и завернуть в документ готов, например, так:

$(document).ready(function() { 
    $("#biography").tabs(); 
}); 

Без #, JQuery ищет элемент с именем тега биографии, вместо элемента с идентификатор биографии.

Затем удалите пролеты внутри вкладки навигации якорей, например, так:

<div id="biography"> 
    <ul> 
     <li> 
      <a href="#one">one</a> 
     </li> 
     <li> 
      <a href="#two">two</a> 
     </li> 
     <li> 
      <a href="#three">three</a> 
     </li> 
     <li> 
      <a href="#four">four</a> 
     </li> 
     <li> 
      <a href="#five">five</a> 
     </li> 
    </ul> 
    <div id="one"> 
     <p>text 1</p> 
    </div> 
    <div id="two"> 
     <p>text 2</p> 
    </div> 
    <div id="three"> 
     <p>text 3</p> 
    </div> 
    <div id="four"> 
     <p>text 4</p> 
    </div> 
    <div id="five"> 
     <p>text 5</p> 
    </div> 
</div> 

See it work in this fiddle

и удалить эти строки целиком:

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>