sidebar.php中的Bootstrap tabbable锚点

时间:2013-02-22 07:32:39

标签: php html twitter-bootstrap

我认为自己是中间的css,初学者在php,但是js:/

对于我的问题,我使用的是基本的bootstrap格式,并创建了header.php,footer.php,body.php和sidebar.php

Header.php包含所有顶级导航以及指向css的链接。

footer.php包含

     <script type="text/javascript" src="js/jquery.js"></script>
     <script type="text/javascript" src="js/bootstrap.js"></script>
     <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>

body.php包含主体以及页面进入侧边栏的特定导航链接。

     <div class="container">
      <div class="tabbable">
       <div class = "row"> 
        <div class="span8 pull-right">
         <div class="tab-content">
          <div class="tab-pane fade active in" id="thing1">
            <p>about this thing1</p>
          </div><!--end tab-pane-->
          <div class="tab-pane fade in" id="thing2">
            <p>about this thing2</p> 
          </div><!--end tab-pane-->
         </div><!--end tab-content-->
        </div><!--end span8-->

     <!--sidebar info --> 
       <?php 
        $sidebar_nav = "<ul class='nav nav-pills nav-stacked' id='tabs' data-tabs='tabs'>
        <li><a href='#thing1' data-toggle='tab'>Thing 1 >></a></li>
        <li><a href='#thing2' data-toggle='tab'>Thing 2 >></a></li>
        </ul>";
        include "sidebar.php";
       ?> 
     <!-- end sidebar-->

     </div><!--end tabbable-->
    </div><!--end row-->
   </div><!--end container-->
    <!--end main body-->

Sidebar.php包含

    <div class="span4">
     <div class="well-small">
      <div class="pull-right">
       <?php echo $sidebar_nav;?> 
      </div><!--end pull-right-->   
     </div><!--end well-small -->
    </div><!-- end span4 -->

我玩过将以下代码放在body.php页面的底部以及脚本链接后的页脚中。

       <script>
         $('#tabs a').click(function (e) {
         e.preventDefault();
     $(this).tab('show');
     });
       </script>

我已经让李的班级活跃起来,并且最近把它们拿走了。

会发生什么事情是隐藏了thing2块,点击侧栏中的thing2链接什么也没做!我究竟做错了什么?它没有从thing1切换到thing2。

请帮忙!

2 个答案:

答案 0 :(得分:1)

经过一个月的疯狂,我发现问题是由于type =“text / javascript ** unclosed” 这样一个新的错误!

答案 1 :(得分:0)

不确定这是绝对的答案,还有一些我注意到的事情:

1 - footer.php在文件底部包含一个空格。删除该行。

2 - 您需要使用HTML实体值的字符。否则,它可以被视为HTML标记的一部分。

变化:

<li><a href='#thing1' data-toggle='tab'>Thing 1 >></a></li>
<li><a href='#thing2' data-toggle='tab'>Thing 2 >></a></li>

<li><a href='#thing1' data-toggle='tab'>Thing 1 &gt;&gt;</a></li>
<li><a href='#thing2' data-toggle='tab'>Thing 2 &gt;&gt;</a></li>