thinkphp5切换标签的做法

thinkphp5切换标签的做法

好郁闷最初做的项目加载速度太慢，想了一下，大概明白为什么。各种url都放在了数据库，然后每个url都要查数据库，顶部导航查一次，测边导航又查一次，速度简直慢成渣渣。

我的思路

顶部标签各放一个li，a标签指引index,通过index查数据库，通过数据库找到侧栏url，加载侧栏，然后通过侧栏标签找数据库iframe加载内容url,找到url，然后才显示。

使用block

base.html

{block name="xx"}{/block}

index.html

{extend name='public/base'{block name="xx"}{/block}

导航栏同样用a标签，但是标签是固定的，使用模板{:url}，事实上这个只是不同界面，但加载速度也快一点，使用block，这是一种思路。

使用show,hide进行切换

主要是使用js来实现这一点：

function () $(".nav-item").click(function () $(this).addClass('topactive').siblings('li').removeClass('topactive'); var mid = $(this).attr('menu-id'); $("#sub-"+mid).show().siblings("ul").hide(); return false; }); $(".sub-item").click(function () $(this).addClass('active'); $(this).siblings('li').removeClass('active'); }); });

这个技术主要是两点，1.全部显示，切换速度快；2.使用​​$(this).addClass('topactive').siblings('li').removeClass('topactive');​​这种方式切换active状态，所以这种显示方式能够达到切换速度较快的后果。（这句的意思是为当前标签加class topactive，找到同层的li标签，移除它们的class topactive）但是这种也有个问题，一刷新就回到第一页了。它这里的url使用数据库的，因为只要加载一次，首次加载速度略慢，使用js略快一点。

大概分析完，打算用block+js的sibling，刷新保持在当前标签，这样体验好一点。整理完了，到了写代码的时间。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。