加载后链接保持粗体答案

【问题标题】：Link to stay bold after loading加载后链接保持粗体
【发布时间】：2015-08-02 12:26:51
【问题描述】：

我有一个导航栏，我希望在重新加载新页面后单击的链接保持粗体。我正在使用使用动态 CSS 静态文件的 CSS django。我也在使用 Jquery 来制作“大胆”。当我使用 preventDefault() 时，代码确实有效（但当然它会阻止加载链接）。新页面加载后，它会不断恢复到旧的 CSS（不是粗体）。

$(document).ready(function(){
    $('nav ul li a').click(function(){
        $(this).addClass('boldlist');
        $(this).siblings().removeClass('boldlist');
        alert('clicked');   
    })

});

不确定如何解决这个问题.. 有什么建议吗？

编辑：我正在尝试将链接设置为粗体，以便用户知道他/她在该页面上。用户想要单击“添加运行”链接..（添加运行变为粗体的瞬间）..但是当它实际加载到添加运行页面时..CSS 恢复回来（没有粗体）。

就像上面的 stackoverflow 问题标签用户徽章列表一样。如果单击它，它会突出显示自身以区别于其他按钮。

编辑：我认为 CSS 文件在加载新页面时没有与 Jquery 修改一起保存。

<!DOCTYPE html>
{% load static %}
<html>
<head>
    <meta charset="utf-8">
    <title>RunLog {% block title %}  {% endblock title %}</title>
    <link rel="stylesheet" href="{% static "css/base.css" %}"/>
     <!-- CSS -->
    <script src="{% static "js/jquery.min.js" %}"></script>
    <script src="{% static "js/base.js" %}"></script>
</head> 
<body>

    <div class="container">
        <div class='user'>
            {% if user.username %}
            <h3> runner: {{ user.username }}</h3>
            {% endif %}
        </div>
        <div class="logo"> <h1> runLog </h1></div> 
    <nav>
        <ul>
        {% if user.is_authenticated %}
            <li><a href="{% url 'index' %}"> Home</a></li>
            <li><a href="{% url 'add_run' %}"> Add Run </a></li>
            <li><a href="{% url 'getmonthavg' %}"> Month Rate</a></li>
            <li><a href="{% url 'getweekavg' %}"> Week Rate</a></li>    
            <li><a href="{% url 'logout' %}">Logout</a></li>
        {% else %}
            <li><a href="{% url 'register' %}"> Register </a></li>
            <li><a href="{% url 'login' %}"> Login </a></li>
        {% endif %}
        </ul>
    </nav>


    {% block body %}{% endblock body %}
    <div>
</body>

</html>

已解决：使用了你们所有人的部分解决方案。我不得不删除浏览器的 cookie 以使代码也能正常工作......似乎是罪魁祸首。

【问题讨论】：

链接改变了url？也请添加链接的html
您的描述不是很清楚，您想让链接在点击时变为粗体吗？为什么要从兄弟元素中删除它
也许你需要一个:visited 来设置它的粗体
我希望它加粗，以便用户知道他/她在该页面上。我想将其从其他兄弟姐妹中删除以进行区分。我可以将 H1 标签作为标题.. 但我想要一种更简洁的方法。

标签： jquery css django

【解决方案1】：

另一个建议：页面名称是在模板中的某处还是在 div 中的某处？如果是这样，您可以使用它来设置 CSS 规则。无论如何，我认为确定您所在的页面应该由您的模板处理。因此，假设您的页面标题在模板或 div 中，您可以设置如下规则：

var title = {{ title }} or $(div_with_title).text();
$("a:contains('+title+')").css('font-weight', 'bold');

或者添加一个类，以便管理更多样式。

或者根本不使用 javascript，您可以从视图中获取正在呈现的页面，并在 li 元素中添加一个条件，以在活动页面上添加一个类并在 css 中设置粗体。像这样：

<li {% if current_page == 'Home' %}class="active_page"{% endif %}...

【讨论】：

还使用了您方法的一部分来识别链接。谢谢

【解决方案2】：

首先使用 window.location 创建一个用于识别当前加载的页面的 JS 代码，然后编写如下代码的条件语句

var path = window.location.pathname;
var page = path.split("/").pop();
if( page =='ab'){
      $('.nav #ab').addClass('strong');
}

您可以为此编写任何样式。希望你能取得好成绩

【讨论】：

感谢我使用了window.path方法来识别站点。
很高兴听到你的消息

【解决方案3】：

随机猜测，但这不会做吗？

a:visited {
  font-weight: bold;
}

【讨论】：

【解决方案4】：

client-side 解决方案将取决于cookies 或现代data storage。请尝试以下操作：

var clicks = [];
$(document).ready(function(){
  $("#navbar a").click(function(){
    clicks[$("a").index(this)] = $("a").index(this);
clicks = clicks.filter(function(n){ return n != undefined });

$.cookie('clicks',clicks.toString() , { expires: 7, path: '/' }); 
console.log(clicks)

  })
console.log($.cookie('clicks').split(","))
$("#navbar a").each(function(){
  if ($.inArray($("a").index(this)+"", $.cookie('clicks').split(",")) != -1){
  console.log($("a").index(this))
   $(this).addClass("visited")
   }

})

});

查看此DEMO

但是，上述解决方案在第一行clicks = [] 处有一个小错误。 clicks 数组的声明应该是有条件的，并且与 clicks cookie 相关，如果存在，则使用 cookie 的值来启动它。

以下是使上述错误无效的修改：

if ($.cookie('clicks')){
  var clicks = $.cookie('clicks').split(",");
}
else{
  var clicks = [];
}

在clicks 数组中赋值也会有类型转换为字符串：

 clicks[$("a").index(this)] = $("a").index(this)+"";

查看New DEMO

【讨论】：