链接不工作django

时间:2016-07-07 15:49:26

标签: jquery css django

朋友们,我正在我的网站上实现一个通知弹出窗口。弹出窗口工作正常,但其中的链接不起作用。

这是我的__navbar.html(仅包含notifications.html

{% include "__notifications.html" %}

和我的__notifications.html

<li id="notification_li">
  <a href="#" id="notificationLink" style="outline: none">Notifications</a>
  <span id="notification_count">{{ notifications.count }}</span>

  <div id="notificationContainer" style="opacity:1">
  <div id="notificationTitle">Notifications</div>
  <div id="notificationsBody" class="notifications">
   <ul>
{% for n in notifications %}
  {% if n.type == "followed" %}
      <li class="alert alert-info">
        <a href="{% url 'profile' n.fr.username %}">{{ n.fr.username }}</a> {{ n.text }}
        <span style="float:right;color:gray">{{ n.timestamps|timesince }} ago</span>
        <!--<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>-->
      </li>
  {% elif n.type == "correct" %}
    <li class="alert alert-success">
      <a href="{% url 'profile' n.fr.username %}">{{ n.fr.username }}</a> {{ n.text }}
      <span style="float:right;color:gray">{{ n.timestamps|timesince }} ago</span>

      <!--<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>-->
    </li>
  {% else %}
    <li class="alert alert-danger">
      <a href="{% url 'profile' n.fr.username %}">{{ n.fr.username }}</a> {{ n.text }}
      <span style="float:right;color:gray">{{ n.timestamps|timesince }} ago</span>

      <!--<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>-->
    </li>
  {% endif %}
{% endfor %}
</ul>
  </div>
  <div id="notificationFooter">
    <a href="#" class="btn btn-xs btn-Biology" style="border-radius:  22px;">View All</a>
    <a href="{% url 'clear_notifications' %}" class="btn btn-xs btn-warning" style="border-radius: 22px;position:relative"> Clear All</a>
  </div>
  </div>

</li>

如果有帮助,这是我的notifications.css

#notification_li
        {
        position:relative
        }

        #notification_li > a{
            color:white;
        }
        .navbar > .navbar-right > #notification_li > #notificationLin >  #notificationContainer{
            opacity:1;
        }
        #notificationContainer 
        {
        background-color: #fff;
        border: 1px solid rgba(100, 100, 100, .4);
        -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
        overflow: visible;
        position: absolute;
        top: 30px;
        opacity: 0.9;
        opacity:1;
        margin-left: -70px;
        width: 400px;
        z-index: 0;
        margin-top: 14px;
        display: none; // Enable this after jquery implementation 
        }
        // Popup Arrow
        #notificationContainer:before {
        content: '';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        color: transparent;
        border: 10px solid black;
        border-color: transparent transparent white;
        margin-top: 10px;
        margin-left: 188px;
        }
        #notificationTitle
        {
        font-weight: bold;
        padding: 8px;
        font-size: 13px;
        background-color: #ffffff;
        position: fixed;
        z-index: 1000;
        width: 384px;
        border-bottom: 1px solid #dddddd;
        }
        #notificationsBody
        {
        padding: 33px 0px 0px 0px !important;
        height:auto;
        }

        #notificationsBody > ul{
            margin-left:-40px;
            margin-bottom: -20px;
        }

        #notificationsBody > ul > li:first-child{
            margin-top:3px;
        }

        #notificationsBody > ul > li{
            margin-top:-20px;
        }

        #notificationFooter
        {
        background-color: #e9eaed;
        text-align: center;
        font-weight: bold;
        padding: 8px;
        font-size: 12px;
        border-top: 1px solid #dddddd;
        }



    #notification_count 
    {
    padding: 3px 7px 3px 7px;
    background: #cc0000;
    color: #ffffff;
    font-weight: bold;
    margin-left: 102px;
    border-radius: 9px;
    -moz-border-radius: 9px; 
    -webkit-border-radius: 9px;
    position: absolute;
    margin-top: -35px;
    font-size: 11px;
    }


.notifications > ul > li{
    list-style-type:none; 
}

最后,我的notifications.js

 $(document).ready(function()
        {
        $("#notificationLink").click(function()
        {
        $("#notificationContainer").fadeToggle(300);
        //$("#notification_count").fadeOut("slow");
        return false;
        });

        //Document Click hiding the popup 
        $(document).click(function()
        {
        $("#notificationContainer").hide();
        });

        //Popup on click
        $("#notificationContainer").click(function()
        {
        return false;
        });

    });

当我点击弹出窗口中的链接时,它们什么都不做。我该怎么办?

0 个答案:

没有答案