在做网站的时候你是否遇到过这样的问题呢?需要在某个导航下调用文章标题(不是导航的下来菜单哟)。小编这两台做网站的时候就遇到这样的情况了,但是很长时间都没有解决掉后来请教了一些大师级别的人物终于得到了解决的办法。
js怎么实现在某个导航下调用文章标题?在这里需要说明的是我们做网站的都知道导航都是直接从后台调用的只需要一段循环代码就可以了,这时我们调用导航的下拉子菜单之外的内容的时候就会遇到问题,普通的js鼠标经过效果已经不再适合做这个效果了,这时我们需要换一下思考就可以解决问题了。
小编就以大家最长使用的phpcms为例吧:
<div class="nav-box" id="nav-box" data-padding="50">
{pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorder asc"}
<ul class="nav-box-ul">
<li>
<a class="one navdown" href="{siteurl($siteid)}" style="padding: 0px 25px;"><span>首 页</span></a>
</li>
{loop $data $r}<!-- 一级栏目循环开始 -->
<li >
<a class="one " href="{$r[url]}" style="padding: 0px 25px;"><span>{$r[catname]}</span></a>
<div class="ppzq_box">
<dl>
{pc:content action="lists" catid="12" num="20" order="id desc"}
{loop $data $r}
<dd><a href="{$r[url]}"><img src="{$r[thumb]}" width="88" height="37"></a></dd>
{/loop}
{/pc}
</dl>
</div>
</li>
{/loop}<!-- 一级栏目循环结束-->
</ul>
{/pc}
<script type="text/javascript">
$(function(){
$(".nav-box .nav-box-ul li").eq(4).hover(function(){
$(".nav-box .ppzq_box").eq(3).show();
},
function(){
$(".nav-box .ppzq_box").hide();
});
})
</script>
</div>
效果:
这段代码的主要内容就是红色字体部分如果我们能考虑到这一点那这个效果我们就可以完美的实现了,这个效果可以实现的小编亲自测试的哟!
注意:ppzq_box只需要定位到nav-box-ul的li中的
是不是已经解决了你的问题了呢?如果在使用这段代码的时候遇到问题可以咨询小编。
效果:
这段代码的主要内容就是红色字体部分如果我们能考虑到这一点那这个效果我们就可以完美的实现了,这个效果可以实现的小编亲自测试的哟!
注意:ppzq_box只需要定位到nav-box-ul的li中的
是不是已经解决了你的问题了呢?如果在使用这段代码的时候遇到问题可以咨询小编。