网站点进内页当前栏目显示高亮（二级、三级栏目）

<ul class="proSClass" id="JSproCats">
    <?php
      $proCats = $partTable->where('parentId='.($partTable->where('mark="products"')->getField('id')))
            ->field('id,path,cnName')->select();
    ?>
    <volist name="proCats" id="vo">
      <li>
        <span class="f">
          <a href="/<{$vo.path}>" <if condition="$part['path'] eq $vo['path']">class="current"</if> id="JS<{$vo.path}>M" level="1"><{$vo.cnName}></a>
          <em> </em>
        </span>
        <?php
          $sproCats2 = array();
          $sproCats2 = $partTable->where('parentId='.$vo['id'])->field('id,path,cnName')->select();
        ?>
        <if condition="isset($sproCats2)">
        <ul class="t">
          <volist name="sproCats2" id="vo2">
            <li>
              <a href="/<{$vo2.path}>" <if condition="$part['path'] eq $vo2['path']">class="current"</if> level="2" id="JS<{$vo2.path}>M"><{$vo2.cnName}></a>
            </li>
          </volist>
        </ul>
        </if>
      </li>
    </volist>
  </ul>

<script type="text/javascript">
  switch($('#JS<{$part.path}>M').attr('level')){
    case'2':
      $('#JS<{$part.path}>M').parent().addClass('open');
      $('#JS<{$part.path}>M').parent().parent().parent().addClass('open');
      break;
    case'1':
      $('#JS<{$part.path}>M').parent().parent().addClass('open');
      break;
    default:
      break;
  };
  $('#JSproCats em').click(function(){
    var that = $(this).parent().parent('li');
    if(that.hasClass('open')){
      $('#JSproCats li').removeClass('open');
    }else{
      $('#JSproCats li').removeClass('open');
      that.addClass('open');
    }
  });
</script>

ul.proSClass{float:left;width:208px;border-top:1px solid #e1cebd;border-right:1px solid #e1cebd;border-left:1px solid #e1cebd;/*background:#fff;*/}
ul.proSClass li{float:left;width:208px;height:auto; border-bottom:1px solid #e1cebd; font-size:14px;overflow:hidden;}
ul.proSClass li span.f{float:left;width:179px;height:35px;line-height: 35px;padding:0px 10px 0px 25px;overflow: hidden}
ul.proSClass li span.f a{float:left;font-size:14px;color: #886657;}
ul.proSClass li.open span.f a.current,ul.proSClass li.open span.f a{}
ul.proSClass li span.f em{float:right;width:12px;height:12px;margin:11px 15px;/*background:url(../Images/jj.png)no-repeat;cursor: pointer; */overflow: hidden}
ul.proSClass li span.f em a{display: block;width:100%;height:12px;}
ul.proSClass li ul.t{display:none;float:left;width:208px;background: none;}
ul.proSClass li ul.t li{float:left;width:208px;line-height: 35px; border-bottom:none; }
ul.proSClass li ul.t li a{color: #886657;}
ul.proSClass li ul.t li span.th{float:left;width:169px;height:35px;line-height:35px; overflow: hidden}
ul.proSClass li ul.t li span.th a{float:left;font-size:14px;}
ul.proSClass li ul.t li.open span.th em{background-position:0px -7px;}
ul.proSClass li.open span.f{border-bottom:1px solid #e1cebd;}
ul.proSClass li.open span.f em{background-position:0px -12px;}
ul.proSClass li.open ul.t{display:block;}
ul.proSClass li ul.t li a{text-indent:35px;display:inline-block;width:100%;}
ul.proSClass li ul.t li.open{background-position:2px 4px;}
ul.proSClass li ul.t li.open a{color:#fff;font-weight:bold;background:#886657;display:block;width:100%;}
ul.proSClass li ul.t li.open ul.s{display: block;}

玄玄博客 http://www.blogxuan.com/