导航栏链接,例如关于和联系,不能工作

时间:2016-12-22 00:14:09

标签: python html django hyperlink navbar

有人能告诉我如何修复下面代码中的导航栏链接问题吗?我尝试了几乎所有的东西,并阅读了所有相关的StackOverflow文章和各种各样的东西,但无法弄明白!

nothing happens when I click on about or contact

如果有人有线索或任何可能对我有帮助的想法,我真的很感激!

提前致谢

  <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>Welcome</title>

            <!-- Bootstrap core CSS -->
            {% load staticfiles %}
             <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
             <link href="{% static 'personal/css/bootstrap.min.css' %}"  rel="stylesheet" />
             <link href="{% static 'personal/css/navbar-static-top.css' %}" rel="stylesheet">
             <link href="{% static 'personal/css/custom.css' %}" rel="stylesheet">



            <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
            <!--[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>
            <!-- NAVBAR
            ================================================== -->

            <div class="container">

                        <nav class="navbar navbar-default navbar-static-top">
                          <div class="container">
                            <div class="navbar-header">
                              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                              </button>
                              <a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'personal/img/mvp_landing_logo.png' %}" /></a>
                            </div>
                            <div id="navbar" class="navbar-collapse collapse">
                              <ul class="nav navbar-nav">
                                <li><a href="{% url 'home' %}">Home</a></li>
                                <li><a href="{% url 'about' %}">About</a></li>
                                <li><a href="http://www.jssor.com/tutorial/index.html">Tutorial</a></li>
                                <li><a href="{% url 'contact' %}">Contact</a></li>
                              </ul>
                          </div><!--/.nav-collapse -->
                          </div>
                        </nav>

             </div>

            <!-- Use a container to wrap the slider, the purpose is to enable slider to always fit width of the wrapper while window resize -->
            <div class="container">

                <!-- Jssor Slider Begin -->
                <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
                <!-- ================================================== -->
                <script src="{% static 'personal/js/jquery-1.9.1.min.js' %}"></script>
                <script src="{% static 'personal/js/jssor.slider.mini.js' %}"></script>

                <script>
                    jssor_slider1_starter = function (containerId) {
                    //Reference http://www.jssor.com/development/slider-with-slideshow-no-jquery.html
                    //Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html

                    var _SlideshowTransitions = [
                    //Fade
                    { $Duration: 3200, $Opacity: 2 }
                    ];

                    var options = {
                        $SlideDuration: 800,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                        $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)
                        $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                        $Idle: 1500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                        $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                        $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                        $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                        $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                        $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
                        }
                    };

                    var jssor_slider1 = new $JssorSlider$(containerId, options);
                    }
                </script>


                  <div id="slider1_container" style="visibility: hidden; position: relative; margin: 0 auto; width: 1140px; height: 442px; overflow: hidden;">

                    <!-- Loading Screen -->
                    <div u="loading" style="position: absolute; top: 0px; left: 0px;">
                        <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;

                        background-color: #000; top: 0px; left: 0px;width: 100%; height:100%;">
                        </div>
                        <div style="position: absolute; display: block; background: url(/static/personal/img/loading.gif) no-repeat center center;

                        top: 0px; left: 0px;width: 100%;height:100%;">
                        </div>
                    </div>

                    <!-- Slides Container -->
                <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 1140px; height: 442px;
                overflow: hidden;">
                    <div>
                        <img u="image" src="{% static 'personal/img/01.jpg' %}" />
                    <div>
                    </div>
                        <img u="image" src="{% static 'personal/img/02.jpg' %}" />
                    </div>
                    <div>
                        <img u="image" src="{% static 'personal/img/03.jpg' %}" />
                    </div>
                    <div>
                        <img u="image" src="{% static 'personal/img/04.jpg' %}" />
                    </div>
                </div>
            <a style="display: none" href="http://www.jssor.com">content slider</a>
                 <!-- Trigger -->
                <script>
                    jssor_slider1_starter('slider1_container');
                </script>

                    <!--#region Bullet Navigator Skin Begin -->
                    <!-- Help: http://www.jssor.com/tutorial/set-bullet-navigator.html -->
                    <style>
                        /* jssor slider bullet navigator skin 05 css */
                        /*
                        .jssorb05 div           (normal)
                        .jssorb05 div:hover     (normal mouseover)
                        .jssorb05 .av           (active)
                        .jssorb05 .av:hover     (active mouseover)
                        .jssorb05 .dn           (mousedown)
                        */
                        .jssorb05 {
                            position: absolute;
                        }
                        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
                            position: absolute;
                            /* size of bullet elment */
                            width: 16px;
                            height: 16px;
                            background: url(static/personal/img/b05.png) no-repeat;
                            overflow: hidden;
                            cursor: pointer;
                        }
                        .jssorb05 div { background-position: -7px -7px; }
                        .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
                        .jssorb05 .av { background-position: -67px -7px; }
                        .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
                    </style>
                    <!-- bullet navigator container -->
                    <div u="navigator" class="jssorb05" style="bottom: 16px; right: 6px;">
                        <!-- bullet navigator item prototype -->
                        <div u="prototype"></div>
                    </div>
                    <!--#endregion Bullet Navigator Skin End -->

                    <!--#region Arrow Navigator Skin Begin -->
                    <!-- Help: http://www.jssor.com/tutorial/set-arrow-navigator.html -->
                    <style>
                        /* jssor slider arrow navigator skin 11 css */
                        /*
                        .jssora11l                  (normal)
                        .jssora11r                  (normal)
                        .jssora11l:hover            (normal mouseover)
                        .jssora11r:hover            (normal mouseover)
                        .jssora11l.jssora11ldn      (mousedown)
                        .jssora11r.jssora11rdn      (mousedown)
                        */
                        .jssora11l, .jssora11r {
                            display: block;
                            position: absolute;
                            /* size of arrow element */
                            width: 37px;
                            height: 37px;
                            cursor: pointer;
                            background: url(static/personal/img/a11.png) no-repeat;
                            overflow: hidden;
                        }
                        .jssora11l { background-position: -11px -41px; }
                        .jssora11r { background-position: -71px -41px; }
                        .jssora11l:hover { background-position: -131px -41px; }
                        .jssora11r:hover { background-position: -191px -41px; }
                        .jssora11l.jssora11ldn { background-position: -251px -41px; }
                        .jssora11r.jssora11rdn { background-position: -311px -41px; }
                    </style>
                    <!-- Arrow Left -->
                    <span u="arrowleft" class="jssora11l" style="top: 123px; left: 8px;">
                    </span>
                    <!-- Arrow Right -->
                    <span u="arrowright" class="jssora11r" style="top: 123px; right: 8px;">
                    </span>
                    <!--#endregion Arrow Navigator Skin End -->
                    <a style="display: none" href="http://www.jssor.com">Bootstrap Carousel</a>
                </div>
                <!-- Jssor Slider End -->
            </div>

            <!-- Marketing messaging and featurettes
            ================================================== -->
            <!-- Wrap the rest of the page in another container to center all the content. -->

            <div class="container marketing">

                <hr class="featurette-divider">

                <div class="row featurette">
                    <div class="col-md-7">
                        <h2 class="featurette-heading">This page runs <a href="http://getbootstrap.com" target="_blank" rel="nofollow">Bootstrap</a> with Jssor Slider.</h2>
                        <p class="lead">Use Jssor Slider as a compoment of Bootstrap is extremly easy. Given a slider you worked out, to integrate it with Bootstrap, you can just copy javascript and html code and paste it into your page. This page is a simple demo, please view source of this page or download <a href="http://www.jssor.com/download-bootstrap-carousel-slider-example.html">Bootstrap Carousel Slider Example</a>.</p>
                    </div>
                    <div class="col-md-5">
                        <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
                    </div>
                </div>

                <hr class="featurette-divider">

                <div class="row featurette">
                    <div class="col-md-5">
                        <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
                    </div>
                    <div class="col-md-7">
                        <h2 class="featurette-heading">Javascript Code</h2>
                        <div class="lead" style="background-color:#f0f0f0; border: 1px dashed #000; white-space: nowrap;">
                            <pre style="margin:0px;">
        &lt;script type="text/javascript" src="../js/jssor.slider.mini.js"&gt;&lt;/script&gt;
        &lt;script&gt;
            jQuery(document).ready(function ($) {
                var options = {
                    ..
                };

                var jssor_slider1 = new $JssorSlider$("slider1_container", options);
                ...
            });
        &lt;/script&gt;</pre>
                        </div>
                    </div>
                </div>

                <hr class="featurette-divider">

                <div class="row featurette">
                    <div class="col-md-7">
                        <h2 class="featurette-heading">HTML Code</h2>
                        <div class="lead" style="background-color:#f0f0f0; border: 1px dashed #000; white-space: nowrap;">
                            <pre style="margin:0px;">
        &lt;div class="container"&gt;
            &lt;!-- Jssor Slider Begin --&gt;
            &lt;div id="slider1_container" style="visibility: hidden; position: relative; margin: 0 auto; width: 980px; height: 380px; overflow: hidden;"&gt;
                ...
            &lt;/div&gt;
            &lt;!-- Jssor Slider End --&gt;
        &lt;/div&gt;</pre>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
                    </div>
                </div>

                <hr class="featurette-divider">

                <!-- /END THE FEATURETTES -->
                <!-- FOOTER -->
                <footer>
                    <p class="pull-right"><a href="#">Back to top</a></p>
                    <p>&copy; Jssor Slider 2009 - 2016. &middot; <a href="#">Privacy</a> &middot; </p>
                </footer>

            </div><!-- /.container -->

            <!-- Bootstrap core JavaScript
            ================================================== -->
             <!-- Placed at the end of the document so the pages load faster -->
            <script src="{% static 'personal/js/jquery-1.9.1.min.js' %}"></script>
            <script src="{% static 'personal/js/bootstrap.min.js' %}"></script>

            <script src="{% static 'personal/js/docs.min.js' %}"></script>
            <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
            <script src="{% static 'personal/js/ie10-viewport-bug-workaround.js' %}"></script>

            <!-- jssor slider scripts-->
            <!-- use jssor.slider.debug.js for debug -->
            <script src="{% static 'personal/js/jssor.slider.mini.js' %}"></script>
            <script>

                jQuery(document).ready(function ($) {
                    var options = {
                        $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                        $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
                        $Idle: 2000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                        $PauseOnHover: 1,                                   //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1

                        $ArrowKeyNavigation: true,                          //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
                        $SlideEasing: $Jease$.$OutQuint,          //[Optional] Specifies easing for right to left animation, default value is $Jease$.$OutQuad
                        $SlideDuration: 800,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                        $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
                        //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
                        //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
                        $SlideSpacing: 0,                                   //[Optional] Space between each slide in pixels, default value is 0
                        $Cols: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                        $Align: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
                        $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
                        $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
                        $DragOrientation: 1,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)

                        $ArrowNavigatorOptions: {                           //[Optional] Options to specify and enable arrow navigator or not
                            $Class: $JssorArrowNavigator$,                  //[Requried] Class to create arrow navigator instance
                            $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                            $Steps: 1                                     //[Optional] Steps to go for each navigation request, default value is 1
                        },

                        $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                            $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                            $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                            $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                            $Rows: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                            $SpacingX: 12,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                            $SpacingY: 4,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                            $Orientation: 1                                //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                        }
                    };

                    var jssor_slider1 = new $JssorSlider$("slider1_container", options);

                    //responsive code begin
                    //you can remove responsive code if you don't want the slider scales while window resizing
                    function ScaleSlider() {
                        var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
                        if (parentWidth) {
                            jssor_slider1.$ScaleWidth(parentWidth - 30);
                        }
                        else
                            window.setTimeout(ScaleSlider, 30);
                    }
                    ScaleSlider();

                    $(window).bind("load", ScaleSlider);
                    $(window).bind("resize", ScaleSlider);
                    $(window).bind("orientationchange", ScaleSlider);
                    //responsive code end
                });
            </script>
        </body>
        </html>

    <!-- end snippet -->

新添加的信息

  

我的导演看起来像:
  mysite的:
   --settings.py
   --urls.py

     


     

personsl:
   --urls.py
   --views.py

     


     

模板:
   --header.html
   --about.html

     


     

mysite.urls喜欢:
  来自django.conf.urls导入网址,包括
  来自django.contrib import admin
  urlpatterns = [
  url(r&#39; ^ admin /&#39;,admin.site.urls),
     url(r&#39; ^&#39;,include(&#39; personal.urls&#39;)),
     url(r&#39; ^ blog /&#39;,include(&#39; blog.urls&#39;)),
     url(r&#39; ^ about / $&#39;,&#39; personal.views.about&#39;,name =&#39; about&#39;),
     url(r&#39; ^ contact / $&#39;,&#39; personal.views.contact&#39;,name =&#39; contact&#39;),
  -------------------------
  personal.urls看起来像:
  来自django.conf.urls导入网址,包括
  来自。导入视图
  urlpatterns = [
     url(r&#39; ^ $&#39;,views.home,name =&#39; home&#39;),
     url(r&#39; ^ $&#39;,views.contact,name =&#39; contact&#39;),
  ]
  -----------------------------
  personal.views看起来像:
  来自django.shortcuts导入渲染
  来自.forms import ContactForm
  来自django.core.mail导入EmailMessage
  来自django.shortcuts导入重定向
  来自django.template导入上下文
  来自django.template.loader import get_template
  
  def home(要求):
     return render(request,&#39; templates / home.html&#39;)
  def(请求):

    return render(request,&#39; templates / about.html&#39;,{})
  def contact(request):
     form_class = ContactForm
     ####

     希望这些能帮助我:)。

1 个答案:

答案 0 :(得分:2)

您似乎为同一个名称定义了2个不同的网址格式(&#39;联系人&#39;),并且2个名称也可以匹配相同的模式(&#39; home&#39;和&#39; contact&#39;将匹配一个空字符串。)

我认为你的网址应该是这样的:

mysite.urls

from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^blog/', include('blog.urls')),
    # other urls...
    url(r'^', include('personal.urls'))  # leave this last, because it matches anything. This way, it's easier for you to make the match
]

personal.urls

from django.conf.urls import url, include
from . import views

urlpatterns = [
    url(r'^about/$', views.about, name='about'),
    url(r'^contact/$', views.contact, name='contact'),
    url(r'^$', views.home, name='home')
]