tabs在php程序中模版class="current"设计的技巧

我们在写程序的时候总会碰到这样的问题

问题:一个页面有几个分类,当点击每个分类的时候,就切换到该分类过来

解决办法:

这种解决办法一般有两种

1、把每个分类的内容都读取出来,通过js的tabs功能,点击切换或是鼠标放上后切换都可以

2、点击这个分类的时候才读取这个分类的数据并显示

实现以上功能的时候为了便于记忆现在显示的是哪个分类的内容,一般会在这个分类的导航下添加class="current",然后给.current写上一些css,例如高深加粗显示等

这个时候就要注意了,php程序上如何判断什么时候加上class="current"呢?

一般做法是:直接在模板上写判断,根据该分类的唯一$_GET值来判断,有就加上,没有则显示为空。

刚才看了phpwind9.0的程序后,有了明悟,更好的实现程序和模板分离的思想

做法如下:

比如友情链接栏目下有三个分类以及对应的链接:

1.链接列表 link.php

2.链接分类 link.php?a=type

3.链接审核 link.php?a=check

link.php 代码如下

$action = $_GET['a'];
if($action == '') { $action = 'run' };

$tabs = array('run' => '', 'type' => '', 'check' => '');
$tabs[$action] = 'class="current"';

模板代码如下

<ul>
	<li {$tabs['run']}><a href="link.php">链接列表</a></li>
	<li {$tabs['type']}><a href="link.php?a=type">链接分类</a></li>
	<li {$tabs['check']}><a href="link.php?a=check">链接审核</a></li>
</ul>

转载于:https://my.oschina.net/u/205403/blog/82000

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
class="dialog-tabs el-tabs el-tabs--left" 是用于添加样式的类名,在element ui的el-dialog组件使用el-tabs组件时,可以通过添加这个类名来指定对话框的选项卡组件的样式和布局。这个类名的具体样式定义可以在引用的common.scss文件找到。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [解决 el-dialog 里嵌入 el-tabs 卡死的问题](https://blog.csdn.net/weixin_48549175/article/details/122350100)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [el-dialog el-tabs结合样式改造](https://blog.csdn.net/xuxu_qkz/article/details/81114568)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [解决vueel-tab-pane切换的问题](https://download.csdn.net/download/weixin_38636577/13128606)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值