我在一个网站上工作,但遇到Twitter BootStrap问题。

我有可浏览的导航栏,可以在不同的视图中导航,并且在每个视图中都有一个轮播。 为了使轮播工作,我不得不从Twitter添加Jquery.js文件。 但是自从我添加了它以来,这些可导航的导航器不再起作用。 我的意思是当指针位于选项卡上时出现结束,但是当我单击它时,什么也没有发生。

我不知道jquery.js和Twitter BootStrap的tabbable导航之间是否存在冲突,或者我做错了什么。 所以这是我的代码:

    <head>
    <!-- JS Files -->
            <script src="bootstrap/js/jquery.js"></script>
            <script src="bootstrap/js/bootstrap.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('.carousel').carousel({
                        interval: 3000
                    });

                $('.carousel').carousel('cycle');
                });
            </script>
    </head>
    <body>

                    <div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                    <li><a href="index.php">Accueil</a></li>

                    <li><a href="index.php?page=concept">Concept</a></li>

                    <li class="active"><a href="index.php?page=collections">Collections</a></li>

                    <li><a href="index.php?page=contact">Contact</a></li>
             </ul>
        </div>
    </div>
</div>

            <ul class="breadcrumb">
                    <li><a href="index.php">Accueil</a> <span class="divider">/</span></li>
                    <li><a href="index.php?page=collections">Collections</a> <span class="divider">/</span></li>
                    <li class="active">SummerSpring - Business Line</li>
            </ul>


        <div  class="tabbable tabs-left">
            <ul class="nav nav-tabs">
                    <li class="active"><a href="index.php?page=collections/summerspring" data-toggle="tab">Business Line</a></li>
                    <li><a href="index.php?page=collections/summerspring/ligneessentielle" data-toggle="tab">Ligne Essentielle</a></li>
                    <li><a href="index.php?page=collections/summerspring/blueline" data-toggle="tab">Blue Line</a></li>
                    <li><a href="index.php?page=collections/summerspring/blacklabel" data-toggle="tab">Black Label</a></li>
                    <li><a href="index.php?page=collections/summerspring/slimfit" data-toggle="tab">Slim Fit</a></li>
                    <li><a href="index.php?page=collections/summerspring/greybygrey" data-toggle="tab">Grey By Grey</a></li>
            </ul>

        <div class="tab-content">
        <div class="tab-pane active">

        <div class="row-fluid">


            <div class="span2">
            </div>


            <div class="span8">
                <br>

            <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                  <li data-target="#myCarousel" data-slide-to="1"></li>
                  <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="images/showroomspirit.jpg" alt="">
                                <div class="carousel-caption">
                                  <h4>First Thumbnail label</h4>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                </div>
                        </div>
                        <div class="item">
                            <img src="images/showroomspirit.jpg" alt="">
                                <div class="carousel-caption">
                                  <h4>Second Thumbnail label</h4>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                </div>
                        </div>
                        <div class="item">
                            <img src="images/showroomspirit.jpg" alt="">
                                <div class="carousel-caption">
                                  <h4>Third Thumbnail label</h4>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                </div>
                        </div>
                    </div>
                                <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                                <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>

            </div>

            <div class="span2">
            </div>

        </div>
    </body>

您有什么想法吗?

===============>>#1 票数:0 已采纳

由于使用了带有Bootstrap选项卡的preventDefault() ,因此未执行锚元素的默认行为。

您可以删除.nav-tabs a元素上的data-toggle="tab"属性,该属性将正常运行。

如果这样做不起作用,则需要让它们再次充当链接; 可以通过使用以下代码来完成:

$('.nav-tabs a')
    .filter('[href]').click(function(){
        window.location.href = $(this).attr('href');
    });

  ask by TheJailbreakBay translate from so

未解决问题?本站智能推荐:

1回复

冲突jquery UI选项卡和Bootstrap 3下拉列表

构建jQuery选项卡时发生冲突 如果这样做,则它不起作用下拉菜单(引导程序) 如果这样做,则无法使用标签页(jQuery UI) 做什么工作以及jquery选项卡和下拉引导程序?
2回复

jQuery与可折叠列表冲突

我当前正在使用一个小的jQuery脚本(包含infra )来使列表具有collapsible-list /可折叠/可扩展类。 默认情况下,脚本会折叠列表(还有一些CSS,也包含在下文中 ,使访问者容易注意到此列表),然后在访问者单击可扩展元素时将其扩展。 以下是脚本: jQuery
3回复

Prototype.js与jquery.js冲突:如何解决这个问题?

我有parent.jsp ,其中包含prototype.js 。 parent.jsp包含一个链接,它从child.jsp加载内容,但child.jsp包含jquery.js 。 现在原型与jquery冲突,我在Internet Explorer中遇到了很多错误,在mozilla firef
1回复

当我使用更新版本的jquery时,bootstrap drow down停止工作

我在我的页面上添加了一个较新版本的Jquery来制作图片滑块,但是当我链接jquery文件以使图像滑块工作时,顶部菜单停止工作(下拉菜单和移动菜单停止工作)。 为了使图像滑块依次工作,我必须从引导程序中删除Jquery链接。 Pikachoose是我找到的图像滑块所需的插件 上班。
1回复

Bootstrap导航栏使用传单消失

我在将传单与Bootstrap集成时遇到了一些困难。 我正在使用一个创建可折叠左侧导航栏的脚本。 当我与传单地图交互时,引导程序导航栏消失。 这似乎是一个CSS冲突,但我似乎无法确定从哪里开始故障排除。 这是jsfiddle,后跟CSS: http : //jsfiddle.net/
1回复

iframe中的自举模式

我有一个带有iframe的页面,并且在body标签之前加载了jquery.js和bootstrap.js 。 在test.html中,脚本以相同的方式加载。 也有带有此代码的main.js文件。 当我单击时,出现错误: Uncaught TypeError:$(...)。
1回复

折叠Bootstrap 3插件冲突Wordpress

敬启者, 我希望获得一些帮助,以解决引导折叠链接为何起作用但无法正常工作的问题。 这是测试站点左侧世界地图下方的蓝色按钮(下面的链接)。 单击按钮时,它应该隐藏下面的文本。 但是,单击它时,它会滚动到链接到的元素,而不是折叠该元素。 我意识到有很多.js脚本可能会覆盖boots
1回复

如何解决项目中的jQuery库冲突

使用Bootstrap Carousel时遇到一个小问题。 实际上,我的项目在Magneto 2中,并且正在使用jQuery 1.12.4,但是Bootstrap Carousel希望使用3.2.1版本的jQuery。 如何解决此冲突? 现在,该场景是在独立示例中,Bootstra
1回复

Ajax调用后引导模型无法正常工作

我在带有jQuery 1.8.3的页面中使用Bootstrap'modal'。 直到我从模态进行Ajax调用之前,它都正常工作。 在ajax调用之后,如果我尝试再次打开模式弹出窗口,则会收到类似Uncaught TypeError的错误:Object#没有方法'modal' 。 我发现
1回复

Bootstrap Carousel NextGen JavaScript冲突

我使用Roots主题(基于引导程序)来开发自定义WordPress网站。 我最近开始使用NextGen Gallery(和Gallery PRO)添加易于管理的照片画廊。 我遇到的问题是Bootstraps Carousel Interval Speed和NextGen Gallery之