今天学习了这个新的方法，做个笔记，毕竟自己前后端都涉猎但是都不精，做个笔记便于查看：
功能：鼠标悬浮时菜单显示一级菜单，鼠标点击IM消息时，本身这个IM消息的a标签变色，而且它的父级a标签页同时变色，
其实对于码农来说变不变色没关系只要功能可以就行了，但是对于一个产品来说，产品人员会以客观的引导性进行对用户的指导，
所以这个是必须的。下面说说主要的实现思路：因为之前也是没做过，所以学习了一下：
<li class="switch-locale-wrap"> <div class="dropdown switch-locale"> <a href="../product/" id="product" class="dropdown-toggle zh" data-toggle=" " style="color: rgb(52, 162, 240);">产品</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li class="left_menu_title"> <div href=""> <div style="float:left;margin-left:16px;color:#A6A29D;margin-top:12px;margin-bottom:3px;font-size:14px;cursor:default">产品</div> <div style="clear:both;"></div> </div> </li> <li class="left_menu_detail" value="1"> <a href="../product/#audio"> <div style="float: left;"> <div class="audio"></div> </div> <div style="float: left; color: rgb(52, 162, 240);" id="audio_talk" class="left_menu">语音通话</div> <div style="clear:both;"></div> </a> </li> <li class="left_menu_detail" value="2"> <a href="../product/#video"> <div style="float: left;"> <div class="video"></div> </div> <div style="float:left;" id="video_talk" class="left_menu">视频通话</div> <div style="clear:both;"></div> </a> </li> <li class="left_menu_detail" value="3"> <a href="../product/#im"> <div style="float: left;"> <div class="im"></div> </div> <div style="float:left;" id="im_message" class="left_menu">IM 消息</div> <div style="clear:both;"></div> </a> </li> <li class="left_menu_detail" value="4"> <a href="../product/#live"> <div style="float: left;"> <div class="live"></div> </div> <div style="float:left;" id="live_telecast" class="left_menu">互动直播</div> <div style="clear:both;"></div> </a> </li> <li class="left_menu_detail" value="5"> <a href="../product/#conference"> <div style="float: left;"> <div class="conference"></div> </div> <div style="float:left;" id="meeting" class="left_menu">会议</div> <div style="clear:both;"></div> </a> </li> </ul> </div> </li>
//首页顶部蓝条 var url = this.location.href; url = url.split('/') var a = url[url.length-1]; var b = url[url.length-2] var detail = (b+'/'+a); // console.log(detail); switch(detail){ case 'product/': $('#product').css('color','#34a2f0'); break; case 'scenario/e-learning.php': $('#e-learning').css('color','#34a2f0'); $('#product').css('color','#34a2f0'); break; case 'scenario/mhealth.php': $('#product').css('color','#34a2f0'); $('#mhealth').css('color','#34a2f0'); break; case 'scenario/social_im.php': $('#product').css('color','#34a2f0'); $('#social_im').css('color','#34a2f0'); break; case 'scenario/o2o.php': $('#product').css('color','#34a2f0'); $('#o2o').css('color','#34a2f0'); break; case 'solution/e-learning.php': $('#e-learning-cloud').css('color','#34a2f0'); break; case 'price/': $('#price').css('color','#34a2f0'); break; case 'download/': $('#download').css('color','#34a2f0'); break; case 'product/#audio': $('#audio_talk').css('color','#34a2f0'); $('#product').css('color','#34a2f0'); break; case 'product/#video': $('#video_talk').css('color','#34a2f0'); $('#product').css('color','#34a2f0'); break; case 'product/#im': $('#im_message').css('color','#34a2f0'); $('#product').css('color','#34a2f0'); break; case 'product/#live': $('#live_telecast').css('color','#34a2f0'); $('#product').css('color','#34a2f0'); break; case 'product/#conference': $('#meeting').css('color','#34a2f0'); $('#product').css('color','#34a2f0'); break; case 'stories/': $('#case').css('color','#34a2f0'); break; } //点击产品左边menu本页面不刷新 导航按钮变色 $('.left_menu_detail').click(function(){ var val = $(this).val(); // console.log(val); switch(val){ case 1: $('.left_menu').css('color','#383838'); $('#audio_talk').css('color','#34a2f0'); $('#product').css('color','#34a2f0'); break; case 2: $('.left_menu').css('color','#383838'); $('#video_talk').css('color','#34a2f0'); $('#product').css('color','#34a2f0'); break; case 3: $('.left_menu').css('color','#383838'); $('#im_message').css('color','#34a2f0'); $('#product').css('color','#34a2f0'); break; case 4: $('.left_menu').css('color','#383838'); $('#live_telecast').css('color','#34a2f0'); $('#product').css('color','#34a2f0'); break; case 5: $('.left_menu').css('color','#383838'); $('#meeting').css('color','#34a2f0'); $('#product').css('color','#34a2f0'); break; } })
源网站： http://www.justalkcloud.com/
其实以上面的代码大家就明白，其实我们可以根据我们的URL来判断是那个导航下的一级菜单，这样我们对每个主导航加上id，
对应访问的路径判断当前url下的哪个主导航需要变色；同时还可以实现当前页面不刷新，变更主导航a标签的颜色；
对于带有导航分类的页面来说如果这样实现变色的话，把每个导航都分别放在一个文件加下这样我们对于路径（URL就会更好处理）
比如MVC中，产品这个主导航我们可以建一个ProductController 那么我们产品下面的每个页面都放在这个ProductController 下面
那么所有的访问路径都是www.sss.com/ProductController/Index 或者www.sss.com/ProductController/IM等等那么我们就可以直接
获取URL中的ProductController，只要是ProductController我们就可以判断是产品主导航下的页面，即我们就可以给其改变颜色。