今天学习了这个新的方法，做个笔记，毕竟自己前后端都涉猎但是都不精，做个笔记便于查看：
功能：鼠标悬浮时菜单显示一级菜单，鼠标点击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我们就可以判断是产品主导航下的页面，即我们就可以给其改变颜色。