0
私のタブは平易ではありません。アクティブなクラスをタブ区画の別の領域に移動すると、ページがロードされるとアクティブなクラスが表示されますが、タブをクリックすると何も起こりません。私のjavascriptは動作していないため、動作しているので、問題が何であるか分かりません。Twitterのブートストラップのタブが機能しない
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your Income Expert</title>
<link rel="stylesheet/less" type="text/css" href="less/style.less">
<script src="js/less.js" type="text/javascript"></script>
<script src="js/bootstrap-tab.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li><h2>Your Logo Here</h2></li>
<li class="nav-header">Main</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Contact</a></li>
<li class="nav-header">Keep In Touch</li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<div class="well">
<div id="motivator">
<img src="broker.png" alt="" />
</div>
<h2 id="motivator-subtext">Main Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu pretium dolor. Ut a vulputate turpis. Donec dignissim mollis scelerisque. Maecenas pharetra, massa a varius mollis, magna odio suscipit sapien, et posuere tellus tellus non arcu.</p>
<p>Fusce a tincidunt purus. Pellentesque augue leo, varius pellentesque tempus sit amet, posuere at tortor. Aenean congue nibh sit amet quam tristique.</p>
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet neque sit amet libero pulvinar vitae consequat ante adipiscing. Nam vehicula arcu in diam vehicula pretium.</p>
<ul class="nav nav-tabs">
<li><a href="#home">Service 1</a></li>
<li><a href="#profile">Service 2</a></li>
<li><a href="#messages">Service 3</a></li>
<li><a href="#settings">Service 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet neque sit amet libero pulvinar vitae consequat ante adipiscing. Nam vehicula arcu in diam vehicula pretium. Nulla volutpat tellus ut tellus consectetur blandit egestas est ullamcorper. Morbi adipiscing suscipit quam eget eleifend. Nam est turpis, blandit sed vehicula ut, aliquet quis turpis. Nulla et ligula in.</p>
</div>
<div class="tab-pane" id="profile">
<p>Testing the profile tab.</p>
</div>
<div class="tab-pane" id="messages">
<p>Testing the messages tab</p>
</div>
<div class="tab-pane" id="settings">
<p>Testing the settings tab.</p>
</div>
</div>
<script>
$(function() {
$('.tabs a:first').tab('show')
})
</script>
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu pretium dolor. Ut a vulputate turpis. Donec dignissim mollis scelerisque. Maecenas pharetra, massa a varius mollis, magna odio suscipit sapien, et posuere tellus tellus non arcu.</p>
</div>
</div>
</div>
</body>
</html>
私の最後に何かが間違っているはずです。私は完全に新しいクリーンなプロジェクトを立ち上げ、あなたのリンクに例を試してみましたが、何も働かなかったのです。 –
私は新鮮なプロジェクトを開始しましたが、まだ動作していません。 Unscaught TypeError：未定義のプロパティ 'fn'を読み取ることができません –
jQueryがありません。 ' 'あなたのドキュメントの' head'にあります。 – scessor