0

私は JS が初めてで、パラダイム全体がかなり混乱しています。

Twitter の Bootstrap.js ライブラリを実装しようとして、私は彼らの指示に従おうとしましたが、まったくうまくいきませんでした。

基本的に、タブプラグインを使いたいです。これはまさに私のマークアップであり、JS コンソールは次のように言い続けています: ReferenceError: Can't find variable: $

ここで jQuery を正しくロードしていない可能性があると思いますが、これを別の方法で行う方法がわかりません。任意の支援をいただければ幸いです。

<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
  <script src="http://twitter.github.com/bootstrap/1.3.0/bootstrap-tabs.js"></script>

<![endif]-->

<!-- Le styles -->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<style type="text/css">
  body {
    padding-top: 60px;
  }
</style>

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">


<div class="topbar">
  <div class="topbar-inner">
    <div class="container-fluid">
      <a class="brand" href="#">Project Name</a>
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
      <p class="pull-right">Logged in as <a href="#">username</a></p>
    </div>
  </div>
</div>

<div class="container-fluid">
   <div class="content">

        <ul class="tabs">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#profile">Profile</a></li>
          <li><a href="#messages">Messages</a></li>
          <li><a href="#settings">Settings</a></li>
        </ul>

        <div class="pill-content">
          <div class="active" id="home">Div 1</div>
          <div id="profile">Div 2</div>
          <div id="messages">Div 3</div>
          <div id="settings">Div 4</div>
        </ul>

        <script>
          $(function () {
            $('.tabs').tabs()
          })
        </script>   
    </div>
  </div>
</div>

4

1 に答える 1

3

最初にjquery.jsを追加する必要があります

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
<script src="http://twitter.github.com/bootstrap/1.3.0/bootstrap-tabs.js"></script>
于 2011-09-26T08:05:44.173 に答える