                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /基于bootstrap的网页开发

求查错。点击没反应

 <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">browsers gallery</a>
            </div>
            <div class="collapse navbar-collapse" id="collapse1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="">summary</a></li>
                    <li><a href="">components</a></li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">characters<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#tab-chrome" data-tab="chrome">chrome</a></li>
                            <li><a href="#tab-firefox" data-tab="firefox">firefox</a></li>
                            <li><a href="#tab-qq" data-tab="qq">opera</a></li>
                            <li><a href="#tab-safari"  data-tab="safari">safari</a></li>
                            <li><a href="#tab-ie" data-tab="ie">IE</a></li>
                        </ul>
                    </li>
                    <li><a href="" data-toggle="modal" data-target="#about">about</a></li>
                </ul>
            </div>
        </div>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
<ul class="nav nav-tabs" role="tablist" id="tab-list">
        <li class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>
        <li><a href="#tab-qq" role="tab" data-toggle="tab">QQ</a></li>
        <li><a href="#tab-safari" role="tab" data-toggle="tab"></a></li>
        <li><a href="#tab-ie" role="tab" data-toggle="tab">IE</a></li>
        <li><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li>
    </ul>

$(document).ready(function() {
        $("#collapse1 .dropdown-menu a").click(function() {
            var href = $(this).attr("href");
            $("#tab-list a[href='" + href + "']").tab("show");
        })
    })

Yvonne_D

2016-06-07

源自：基于bootstrap的网页开发 3-11

关注问题我要回答

1163

操作

收起

3 回答

Panda_Q
2016-11-27

              <script src="js/jquery-3.1.1.min.js"></script>
              <script src="js/bootstrap.min.js"></script>
              <script type="text/javascript">
              $(document).ready(function () {
              $("#demo-navbar .dropdown-menu a").click(function () {
              var href=$(this).attr("href");
              $("#tab-list a[href='"+href+"']").tab("show");
              })
              })
              </script>

注意顺序，要先引入jq，再引入bootstrap，最后引入自定义jq内容