欢迎来到元素模板ys720.com,本站提供专业的织梦模板PBOOTCMS模板网站模板网站修改/网站仿站
当前位置:主页 > 程序教程 > 其他教程 >
其他教程

jq如何实现点击二级栏目 一级和二级一起高亮?

(元素模板) / 2024-02-27 09:41
jq如何实现点击二级栏目 一级和二级一起高亮?

JQ代码
<script type="text/javascript">
  var urlstr = location.href;
  var urlstatus=false;
  $("#navchange a").each(function () {  
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
      $(this).addClass('cur');
       urlstatus = true;
    } else {
      $(this).removeClass('cur');
    }
  });
  $("#first-menu a").each(function(){
    //判断拥有cur样式的a标签
    if($(this).hasClass('cur')){  
    //把当前拥有cur样式a标签的祖辈的同胞为a的元素,也就是父级菜单的样式添加为cur    
        $(this).parents('ul').siblings('a').eq(0).addClass('cur'); 
        //设置urlstatus变量为true 
        urlstatus = true;            
    }
}) 
  if (!urlstatus) {$("#navchange a").eq(0).addClass('cur'); }
</script>
HTML代码
<ul id="navchange">
                {volist name="tptop" id="vo"}
                {if condition="$vo['show'] eq 1"}
                <li id="first-menu">
                {if condition="$vo['links'] neq ''"}
                    <a href="{$vo.links}">{$vo.name}</a>
                    <ul>
                        {volist name="tptops" id="vs"}
                            {if condition ="$vo.id eq $vs['tid']"}
                                {if condition="$vs['show'] eq 1"}
                                    <li><a href="{$vs.links}">{$vs.name}</a></li>
                                {/if}
                            {/if}
                        {/volist}
                    </ul>
                {/if}    
                </li>
                {/if} 
            {/volist}
            </ul>

Copyright @ 2013-2021 元素模板 www.ys720.com All Rights Reserved. 版权所有 元素模板 www.ys720.com