如何优雅的处理 [当前 active] 的 A 标签

cevincheung · 2016-03-23T12:00:10Z

@section('nav') 用户中心首页充值 /提现提现记录账户 /修改密码实名认证退出登录 @stop 难道非要一个个的 if...echo..active 么？

This topic created in 3713 days ago, the information mentioned may be changed or developed.

@section('nav')
<ul class="nav menu">
        <li class="active"><a href="index.php"><span class="glyphicon glyphicon-dashboard"></span> 用户中心首页</a></li>
        <li><a href="transfer.php"><span class="glyphicon glyphicon-th"></span> 充值 /提现</a></li>
        <li><a href="withdraw-history.php"><span class="glyphicon glyphicon-stats"></span> 提现记录</a></li>
        <li><a href="profile.php"><span class="glyphicon glyphicon-user"></span> 账户 /修改密码</a></li>
        <li><a href="certificate.php"><span class="glyphicon glyphicon-credit-card"></span> 实名认证</a></li>
        <li role="presentation" class="divider"></li>
        <li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span>退出登录</a></li>
</ul>
@stop

难道非要一个个的 if...echo..active 么？

6 replies • 2016-03-24 14:54:56 +08:00

SUBMAIL

Mar 23, 2016

<body id="glyphicon-dashboard">
<ul class="nav menu">
</body>

#glyphicon-dashboar .nav .glyphicon-dashboard{}

这样处理呢？

cevincheung

Mar 23, 2016

@SUBMAIL
没有更好的方法了么- -

SoloCompany

Mar 23, 2016

莫当真

ob_start();
…
$nav = ob_get_contents();
ob_end_clean();
echo str_replace("<li><a href=\“$page\”", “<li class=“ active"><a href=\“$page\”", $nav);

oott123

Mar 23, 2016

你应该把整个导航写成一个循环……这样就稍微优雅一点了。

iNaru

Mar 24, 2016

用 js
```javascript
(function(n){
[].forEach.call(document.querySelectorAll('.nav a'), function(a, i){
a.parentNode.classList[(location.href.indexOf(a.href) == 0 ||
(n == '' && i == 0) ? 'add' : 'remove')]('active');
});
})(location.href.split('/').pop().split(/[\?#&]/).shift());
```

cevincheung

Mar 24, 2016

@iNaru
好吧，用 js 貌似也是个不错的选择。