导航栏链接不起作用

时间:2016-11-30 07:27:49

标签: css ruby-on-rails twitter-bootstrap

我有一个完美的应用程序,但唯一的问题是导航栏链接不可点击。

我在这里找到了正确的答案,但没有任何帮助。

我的主页看起来像这样。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Pasific Site Template | Graphic Cart One</title>        
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta charset="utf-8">
        <meta name="author" content="Harry Boo">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

        <!-- Favicons -->
        <link rel="shortcut icon" href="/assets/favicon.png">
        <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
        <link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png">

        <!-- Load Core CSS 
        =====================================-->
        <link rel="stylesheet" href="/assets/bootstrap.min.css">
        <link rel="stylesheet" href="/assets/animate.min.css">

        <!-- Load Main CSS 
        =====================================-->
        <link rel="stylesheet" href="/assets/main.css">
        <link rel="stylesheet" href="/assets/setting.css">
        <link rel="stylesheet" href="/assets/hover.css">

        <!-- Load Magnific Popup CSS 
        =====================================-->
        <link rel="stylesheet" href="/assets/magic.min.css">        
        <link rel="stylesheet" href="/assets/magnific-popup.css">              
        <link rel="stylesheet" href="/assets/magnific-popup-zoom-gallery.css">

        <!-- Load OWL Carousel CSS 
        =====================================-->
        <link rel="stylesheet" href="/assets/owl.carousel.css">
        <link rel="stylesheet" href="/assets/owl.theme.css">
        <link rel="stylesheet" href="/assets/owl.transitions.css">

        <!-- Load Color CSS - Please uncomment to apply the color.
        =====================================      
        <link rel="stylesheet" href="/assets/blue.css">
        <link rel="stylesheet" href="/assets/brown.css">
        <link rel="stylesheet" href="/assets/cyan.css">
        <link rel="stylesheet" href="/assets/dark.css">
        <link rel="stylesheet" href="/assets/green.css">
        <link rel="stylesheet" href="/assets/orange.css">
        <link rel="stylesheet" href="/assets/purple.css">
        <link rel="stylesheet" href="/assets/pink.css">
        <link rel="stylesheet" href="/assets/red.css">
        <link rel="stylesheet" href="/assets/yellow.css">-->
        <link rel="stylesheet" href="/assets/pasific.css">

        <!-- Load Fontbase Icons - Please Uncomment to use linea icons
        =====================================       
        <link rel="stylesheet" href="/assets/linea-arrows-10.css">
        <link rel="stylesheet" href="/assets/linea-basic-10.css">
        <link rel="stylesheet" href="/assets/linea-basic-elaboration-10.css">
        <link rel="stylesheet" href="/assets/linea-ecommerce-10.css">
        <link rel="stylesheet" href="/assets/linea-music-10.css">
        <link rel="stylesheet" href="/assets/linea-software-10.css">
        <link rel="stylesheet" href="/assets/linea-weather-10.css">--> 
        <link rel="stylesheet" href="/assets/font-awesome.css">
        <link rel="stylesheet" href="/assets/et-line-font.css">

        <!-- Load JS
        HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
        WARNING: Respond.js doesn't work if you view the page via file://
        =====================================-->

        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

    </head>
    <body  id="page-top" data-spy="scroll" data-target=".navbar" data-offset="100">

        <!-- Page Loader
        ===================================== -->
        <div id="pageloader">
            <div class="loader-item">
                <img src="/assets/puff.svg" alt="page loader">
            </div>
        </div>

        <a href="#page-top" class="go-to-top">
            <i class="fa fa-long-arrow-up"></i>
        </a>


        <!-- Navigation Area
        ===================================== -->
        <nav class="navbar navbar-pasific navbar-op navbar-fixed-top">
            <div class="navbar-header">
                <a class="navbar-brand" href="#page-top">
                    <img src="/assets/logo-default.png" alt="logo">
                    Zunocoin
                </a>
                <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>
            </div>
            <div class="navbar-collapse collapse navbar-right">
                <ul class="nav navbar-nav mr20">
                    <li class="hidden"><a href="#page-top"></a></li>
                    <li><a href="/pages/home">Home</a></li>
                    <li><a href="/pages/service">Services</a></li>
                    <li><a href="/pages/pricing">Pricing</a></li>
                    <li><a href="/pages/aboutus">About Us</a></li>
                    <li><a href="/pages/contact">Contact</a></li>                     
                    <li><a href="#" data-toggle="modal" data-target="#loginModal"><i class="fa fa-lock fa-fw"></i>Login</a></li>
                    <li><a href="#" data-toggle="modal" data-target="#searchModal"><i class="fa fa-search fa-fw"></i></a></li>
                </ul>
            </div>
        </nav>


        <!-- Search Modal Dialog Box
        ===================================== -->
        <div id="searchModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header bg-gray">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h5 class="modal-title text-center"><i class="fa fa-search fa-fw"></i> Search here</h5>
                    </div>
                    <div class="modal-body">                        
                        <form action="#" class="inline-form">
                            <input type="text" class="modal-search-input" autofocus>
                        </form>
                    </div>
                    <div class="modal-footer bg-gray">
                        <span class="text-center"><a href="#" class="color-dark">Advanced Search</a></span>
                    </div>
                </div>

            </div>
        </div>  


        <!-- Newsletter Area
        =====================================-->
        <div id="newsletter" class="bg-dark2 pt50 pb50">
            <div class="container">
                <div class="row">                    
                    <div class="col-md-2">
                        <h4 class="color-light">
                            Newsletter
                        </h4>
                    </div>

                    <div class="col-md-10">
                        <form name="newsletter">
                            <div class="input-newsletter-container">
                                <input type="text" name="email" class="input-newsletter" placeholder="enter your email address">
                            </div>
                            <a href="#" class="button button-sm button-pasific hover-ripple-out">Subscribe<i class="fa fa-envelope"></i></a>
                        </form>
                    </div>
                </div><!-- row end -->
            </div><!-- container end -->
        </div><!-- section newsletter end -->


        <!-- footer Area
        ===================================== -->
        <div id="footer" class="footer-two pt50">
            <div class="container-fluid bb-solid-1">
                <div class="container pb35">
                    <div class="row">

                        <!-- footer about start -->
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <h6 class="font-montserrat text-uppercase color-dark">About Us</h6>
                            <p>We are a whitelabel service provider for digital currency. We help people with buying, selling and trading in bitcoins.</p>
                        </div>
                        <!-- footer about end -->

                        <!-- footer menu one start -->
                        <div class="col-md-2 col-md-offset-1 col-sm-3 col-xs-4">
                            <h6 class="font-montserrat text-uppercase color-dark">Menu</h6>
                            <ul class="no-icon-list">
                                <li><a href="pages/home">Home</a></li>
                                <li><a href="pages/aboutus">About</a></li>
                                <li><a href="pages/service">Service</a></li>
                                <li><a href="pages/pricing">Pricing</a></li>
                            </ul>
                        </div>
                        <!-- footer menu one end -->


                        <!-- footer social icons start -->
                        <div class="col-md-2 col-sm-3 col-xs-12">
                            <h6 class="font-montserrat text-uppercase color-dark">Social Media</h6>
                            <div class="social social-two">
                                <a href="#"><i class="fa fa-twitter color-blue"></i></a>
                                <a href="#"><i class="fa fa-facebook color-primary"></i></a>
                                <a href="#"><i class="fa fa-linkedin color-blue"></i></a><br><br>
                                <a href="#"><i class="fa fa-github color-dark"></i></a>
                                <a href="#"><i class="fa fa-pinterest color-red"></i></a>
                            </div>
                        </div>
                        <!-- footer social icons end -->

                    </div><!-- row end -->
                </div><!-- container end -->
            </div><!-- container-fluid end -->

            <div class="container-fluid pt20">
                <div class="container">
                    <div class="row">

                        <!-- copyright start -->
                        <div class="col-md-6 col-sm-6 col-xs-6 pull-left">
                            <p>Copyright &copy;2016 <a href="#">Zunocoin.com</a>. All rights reserved.</p>
                        </div>
                        <!-- copyright end -->

                        <!-- footer bottom start -->
                        <div class="col-md-6 col-sm-6 col-xs-6 pull-right">
                            <p class="text-right">
                                <a href="#" class="mr20">Privacy Policy</a>
                                <a href="#" class="mr20">Term of Use</a>
                                <a href="#" class="mr50">Site Map</a>
                            </p>
                        </div>
                        <!-- footer bottom end -->

                    </div><!-- row end -->
                </div><!-- container end -->
            </div><!-- container-fluid end -->
        </div><!-- footer end -->        

        <!-- JQuery Core
        =====================================-->
        <script src="/assets/jquery.min.js"></script>
        <script src="/assets/bootstrap.min.js"></script>

        <!-- Magnific Popup
        =====================================-->
        <script src="/assets/jquery.magnific-popup.min.js"></script>
        <script src="/assets/magnific-popup-zoom-gallery.js"></script>

        <!-- Progress Bars
        =====================================-->
        <script src="/assets/bootstrap-progressbar.js"></script>
        <script src="/assets/bootstrap-progressbar-main.js"></script>

        <!-- Typed
        =====================================-->
        <script src="/assets/typed.min.js"></script>

        <!-- JQuery Main
        =====================================-->
        <script src="/assets/jquery.appear.js"></script>
        <script src="/assets/isotope.pkgd.min.js"></script>
        <script src="/assets/parallax.min.js"></script>
        <script src="/assets/jquery.countTo.js"></script>
        <script src="/assets/owl.carousel.min.js"></script>
        <script src="/assets/owl.carousel.min.js"></script>
        <script src="/assets/ion.rangeSlider.min.js"></script>
        <script src="/assets/imagesloaded.pkgd.min.js"></script>
        <script src="/assets/main.js"></script>

    </body>
</html>

这是一个多页网站,在导航栏中有下拉列表我将其更改为静态。

我的application.css

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

0 个答案:

没有答案