Итак, я только что начал новый сайт в бутстрапе, и я работаю над дизайном nav-tabs. Я следил за инструкциями к телу и почти скопировал и вставил в этот момент, чтобы заставить его функционировать, но увы, у меня есть несколько проблем:Bootstrap 3 nav-tabs не будут меняться при нажатии
(1) Nav-tabs не меняются при нажатии, т.е. изменяется на мой идентификатор элемента, но фактическая вкладка не становится «активной» (Home остается нажатой, в то время как остальные остаются не нажатыми).
(2) Разделитель табуляции отображает только содержимое, обозначенное классом = «активно».
Я включил необходимые сценарии jquery и bootstrap js, и я считаю, что они в правильном порядке, но независимо от того, что я делаю, эти вкладки никогда не переключают активное состояние на тот, который нажат.
Вот мой HTML:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.2.min" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<title>New Homepage w/ Bootstrap</title>
</head>
<body>
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
Я попытался различные решения, я мог бы найти в том числе добавление
<script>
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
под сценарий bootstrap.min.js, но как я уже говорил только о все, что я сделал, ничего не изменило. Все остальное выглядит хорошо на странице, но небольшое руководство здесь действительно поможет мне начать с правой ноги. Я не работал с бутстрапом более нескольких часов, поэтому простите мое невежество. Документы говорят, что bootstrap даже не требует javascript для переключения вкладок, когда используется переключение данных, поэтому я довольно запутан в правильном ответе.
: EDIT: первый ответ был верным. Размещение тегов прямо перед закрывающим тэгом тела не улучшали функциональность, но заменяя мои сценарии с
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
ли действительно работа. Я мои исходные файлы jquery и bootstrap были в правильном месте, но, похоже, они не полностью функциональны/сломаны каким-то образом или что-то в этом роде. Еще раз спасибо!
Кстати: Могу ли я постоянно ссылаться на эти репозитории или мне придется обновлять свои страницы при появлении новых обновлений bootstrap/jquery? Я спрашиваю, будут ли эти репозитории удалены?
Можете ли вы предоставить jsfiddle того, что вы сделали Habitat –
Уверены ли вы? Кажется, все отлично работает для меня: http://www.bootply.com/3nzwSSfJ8v Даже без вашего Javascript: http://www.bootply.com/wZAR5IWlfU –