Question

大家好，请帮帮忙！

我已经完成了stackoverflow中的所有jquery问题。我尝试了一些解决方案，但我没有得到我想要的结果。我正在为我的公司制作一个单页网站，但我无法为其提供响应。

代码如下：

preg_replace

到目前为止我做的很少。

1。）当在移动设备或标签页中查看网站时，导航栏消失，并出现切换按钮。这很好。

2。）我的服务中的下拉菜单对我不起作用。 3.）我也做了一个旋转木马，滑动得很好但没有响应左右点击图标。

我不知道是什么问题因为1工作正常，但2＆amp; 3没有用。

请帮我解决这个问题并告诉我哪里出错了。

提前致谢。

Answer 1

仔细检查docs是否有工作标记示例。标记几乎没有问题。使用data-toggle="dropdown"作为下拉列表，并且您的href / class属性不是间隔的。删除下拉列表的data-target。

就轮播而言，next和prev区分大小写，因此您需要使用data-slide="prev"。此外，由于您使用的是navbar-fixed-top don't forget to add body {padding-top: 50px;}，否则导航栏会覆盖您的轮播内容。

这是一个有效的更新： http://codeply.com/go/gJvCndru8B

Answer 2

脚本元素应该放在Header元素中。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Top Accountant. Providing solution for all your accounting needs</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.js"></script> 
</head>
<body>
<!-- Navigation -->  
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Top Accountant</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown">
                    <a href="#"class="dropdown-toggle" data-target=".dropdown">Services <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Service 1</a></li>
                        <li><a href="#">Service 1</a></li>
                        <li><a href="#">Service 1</a></li>
                        <li><a href="#">Service 1</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a></li>

            </ul>
        </div>
    </div>
</div>

<!-- End of Navigation -->  

<!--Image slider-->

<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">

        <!--images size should be 1920-741 px -->
        <div class="item active">
            <img src="img/accountancy-services.png" />
            <div class="container">
                <div class="carousel-caption">
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
                    <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
                </div>
            </div>
        </div>

        <div class="item">
            <img src="img/images.jpg" />
            <div class="container">
                <div class="carousel-caption">
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
                    <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
                </div>
            </div>
        </div>

        <div class="item">
            <img src="img/accountant-9-tips.png"/>
            <div class="container">
                <div class="carousel-caption">
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
                    <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
                </div>
            </div>
        </div>
    </div>

    <a class="left carousel-control" href="#myCarousel" data-slide="Prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="Next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

<!--End Image slider-->



</body>
</html>

Answer 3

用以下内容替换整个html代码：

     <!DOCTYPE html>
<html lang="en">
<head>
  <title>Top Accountant. Providing solution for all your accounting needs</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>
<body>

<!-- Navigation -->  
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Top Accountant</a>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>

                <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
           <li><a href="#">Service 1</a></li>
                        <li><a href="#">Service 1</a></li>
                        <li><a href="#">Service 1</a></li>
                        <li><a href="#">Service 1</a></li>
        </ul>
      </li>
                <li><a href="#">Contact</a></li>

            </ul>
        </div>
    </div>
</div>

<!-- End of Navigation -->  

<!--Image slider-->

<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">

        <!--images size should be 1920-741 px -->
        <div class="item active">
            <img src="img/accountancy-services.png" />
            <div class="container">
                <div class="carousel-caption">
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
                    <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
                </div>
            </div>
        </div>

        <div class="item">
            <img src="img/images.jpg" />
            <div class="container">
                <div class="carousel-caption">
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
                    <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
                </div>
            </div>
        </div>

        <div class="item">
            <img src="img/accountant-9-tips.png"/>
            <div class="container">
                <div class="carousel-caption">
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p>
                    <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p>
                </div>
            </div>
        </div>
    </div>

    <a class="left carousel-control" href="#myCarousel" data-slide="Prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="Next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

<!--End Image slider-->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

Answer 4

修复下拉列表：

data-toggle=".dropdown" =＆gt;没有data-toggle="dropdown"

的.

对于旋转木马，我不了解您的问题，但是take a look at the documentation

Answer 5

从官方网站下载Jquery。然后添加头<script src="js/jquery"></script>

jquery和bootstrap.js无法正常工作

5 个答案: