请问下segmentfault中user settings页面右边的li在点击刷新后是怎么记住的？

Question

如图所示，我点击了工作教育经历后，页面刷新了，此时激活的项目变成了工作教育经历了，请问这是怎么实现的？

是后台传给前台哪个li被激活了？还是采用其他的实现方法？

Answer 1

根据 URL 传入参数 $tab 判断当前页

<li<?php if ('aaa' == $tab): ?> class="current"<?php endif; ?>>xxx</li>
<li<?php if ('bbb' == $tab): ?> class="current"<?php endif; ?>>xxx</li>

Answer 2

首先，感谢你邀请我回答。然后你所谓的激活，其实就是给li赋上了一个class="current"属性而已，至于如何判断，这个就更简单了。

SegmentFault 这个应该是在后端判断的，这个 WordPress 等程序的主题里头就有写，想法应该是跟你那个一样，每个都判断一下是否为当前页，是则加，不是则不加。

不过最近写静态博客的主题，发现他们有这么一个思路。程序有一个extends和block函数，可以定义父模板和复写项，比如我在base.html中这样定义了

<li{% block index %}{% endblock %}>你好我是首页</li>
<li{% block user %}{% endblock %}>你好我是用户页</li>
<li{% blcok article %}{% endblock %}>你好我是文章页</li>

然后我在用户页中这么写

{% extends 'base.html' %} {# 表示把base.html继承了过来 #}

{% block user %} class="current"{% endblock %} {#表示给上面定义的一个可以复写项赋值#}

那么最终我的用户页就会呈现这样的效果

<li>你好我是首页</li>
<li class="current">你好我是用户页</li>
<li>你好我是文章页</li>

这样也能达到目的。当然你也可以选择在前端判断，给每个li增加一个对应的class，最好和URL的调用名称一致，然后根据URL的值直接赋值给对应的对象就成了。

总的来说就是，如果你不想给<li>增加单独的标识的话，就只能后台/前端一个一个判断咯，如果增加了单独标识的话就可以快速一点，后端/前端都不局限就是。