2014-11-27 3 views
0

Я пытаюсь настроить bootstrap pill nav menu, но по какой-то причине таблетки не работают, а содержимое просто появляется на одной странице, даже если активная таблетка меняется.Мои загрузочные навигационные пилюли не работают

<div class="navigation"> 
     <ul class="nav nav-pills head-menu" id="navbar"> 
      <li class="active"><a href="#abouttab" data-toggle="pill">About Us</a></li> 
      <li><a href="#sponsorstab" data-toggle="pill" >Sponsors</a></li> 
      <li><a href="#conferencetab" data-toggle="pill">Conference</a></li> 
      <li><a href="#execstab" data-toggle="pill">Execs</a></li> 
      <li><a href="#gallerytab" data-toggle="pill">Gallery</a></li> 
      <li><a href="#contacttab" data-toggle="pill">Contact Us</a></li> 
     </ul> 
     </div> 


<div class="tab-content"> 

<div class="tab-pane" id="abouttab"> 
<h1>Testing</h1> 
</div> 

<div class="tab-pane" id="sponsorstab"> 
<p>Place holder text</p> 
</div> 
</div> 

Любое решение?

Моя голова

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Untitled</title> 

<link rel="stylesheet" type="text/css" href="menu.css"> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<link rel="stylesheet" type="text/css" href="about-page.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="bootstrap.min.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="bootstrap.min.js"></script> 

ответ

0

Ваш код кажется правильным. Вот пример jsfiddle, который я использовал для тестирования: http://jsfiddle.net/zqpfo8f5/

Вы уверены, что правильно добавили загрузочные файлы?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 
    <h1>Hello, world!</h1> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html> 
+0

Отредактировал мой вопрос, чтобы включить эту информацию. Я не думаю, что мне не хватает всего, что повлияет на поведение моих таблеток, но я не уверен. –

+0

@SofiadelaCruz Попробуйте добавить все загрузочные файлы с [CDN] (http://www.bootstrapcdn.com/) и проверить, работает ли он. – anpsmn

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