实现效果
小箭头的实现
先清除所有LI下的小箭头，<i class=''icon><em></em></i>
当滑动的时候在添加激活状态active类里的icon类。添加<i class=''icon><em></em></i>
<li class="active">互联网金融<i class="icon"><em></em></i></li>完成这样的形式这里JS代码
$(function(){
$('#fangan_menu_style1 li').mouseover(function(){
var liindex = $('#fangan_menu_style1 li').index(this);
/**/
$(this).addClass('active').siblings().removeClass('active');
$('#fangan_list_style1 div.fangan_c').eq(liindex).fadeIn(150).siblings('div.fangan_c').hide();
/*这里实现 CSS三角箭头切换*/
$('.solution .solution_menu ul li i').remove('.icon');
$('.solution .solution_menu ul li.active').append('<i class="icon"><em></em></i>');
});
});
HTML
<div class="solution_menu">
<ul class="left" id="fangan_menu_style1">
<li class="active">互联网金融<i class="icon"><em></em></i></li>
<li class="solution_p">保险.证券</li>
<li class="solution_p">电商 O2O</li>
<li class="solution_p">政务云</li>
<li class="solution_p">交通行业</li>
<li class="solution_p">在线医疗</li>
</ul>
<div class="content_list left" id="fangan_list_style1">
<div class="fangan_c current" >
<div class="pic"><img src="images/finance.png"></div>
<div class="text">
<p>国内最大突发流量互联网金融BTOB产品（同时在线用户突破千万）“借贷宝”部署和采用企商在线&象云两地三中心（晓月云基地+亦庄国际金融云数据港+深圳西丽金融数据中心）有效解决了“借贷宝”大流量并发、核心借贷交易、第三方支付等关键业务支撑，是互联网金融用户在云上的难度最高的应用场景之一。
</p>
<p class="more_button">
<a href="jinrongyun.html" >了解更多 </a>
</p>
</div>
</div>
<div class="fangan_c">
<div class="pic"><img src="images/finance.png"></div>
<div class="text">
<p>222222222国内最大突发流量互联网金融BTOB产品（同时在线用户突破千万）“借贷宝”部署和采用企商在线&象云两地三中心（晓月云基地+亦庄国际金融云数据港+深圳西丽金融数据中心）有效解决了“借贷宝”大流量并发、核心借贷交易、第三方支付等关键业务支撑，是互联网金融用户在云上的难度最高的应用场景之一。
</p>
<p class="more_button">
<a href="baoxianzhenquan.html" >了解更多 </a>
</p>
</div>
</div>
<div class="fangan_c">
<div class="pic"><img src="images/finance.png"></div>
<div class="text">
<p>33333333国内最大突发流量互联网金融BTOB产品（同时在线用户突破千万）“借贷宝”部署和采用企商在线&象云两地三中心（晓月云基地+亦庄国际金融云数据港+深圳西丽金融数据中心）有效解决了“借贷宝”大流量并发、核心借贷交易、第三方支付等关键业务支撑，是互联网金融用户在云上的难度最高的应用场景之一。
</p>
<p class="more_button">
<a href="dianshang.html" >了解更多 </a>
</p>
</div>
</div>
<div class="fangan_c">
<div class="pic"><img src="images/finance.png"></div>
<div class="text">
<p>44444444国内最大突发流量互联网金融BTOB产品（同时在线用户突破千万）“借贷宝”部署和采用企商在线&象云两地三中心（晓月云基地+亦庄国际金融云数据港+深圳西丽金融数据中心）有效解决了“借贷宝”大流量并发、核心借贷交易、第三方支付等关键业务支撑，是互联网金融用户在云上的难度最高的应用场景之一。
</p>
<p class="more_button">
<a href="zhengwuyun.html" >了解更多 </a>
</p>
</div>
</div>
<div class="fangan_c">
<div class="pic"><img src="images/finance.png"></div>
<div class="text">
<p>555555555国内最大突发流量互联网金融BTOB产品（同时在线用户突破千万）“借贷宝”部署和采用企商在线&象云两地三中心（晓月云基地+亦庄国际金融云数据港+深圳西丽金融数据中心）有效解决了“借贷宝”大流量并发、核心借贷交易、第三方支付等关键业务支撑，是互联网金融用户在云上的难度最高的应用场景之一。
</p>
<p class="more_button">
<a href="jiaotong.html" >了解更多 </a>
</p>
</div>
</div>
<div class="fangan_c">
<div class="pic"><img src="images/finance.png"></div>
<div class="text">
<p>666666国内最大突发流量互联网金融BTOB产品（同时在线用户突破千万）“借贷宝”部署和采用企商在线&象云两地三中心（晓月云基地+亦庄国际金融云数据港+深圳西丽金融数据中心）有效解决了“借贷宝”大流量并发、核心借贷交易、第三方支付等关键业务支撑，是互联网金融用户在云上的难度最高的应用场景之一。
</p>
<p class="more_button">
<a href="yiliao.html" >了解更多 </a>
</p>
</div>
</div>
</div>
</div>CSS 小箭头实现
左侧菜单li相对定位relative,li下面的em(<i class="icon"><em></em></i>)标签，
<li class="active">互联网金融<i class="icon"><em></em></i></li>CSS里 i标签通过宽高都是0，定义为块元素，边框设置大小透明，单独设置一边的颜色。i标签和I标签里面的EM标签都是绝对定位
.solution .solution_menu ul li.active{
color: #fff;
background: #36a1f1;
position:relative;
}
.solution .solution_menu ul li{
width: 131px;
height: 47px;
text-align: center;
line-height: 47px;
border-radius:10px;
display: block;
}
/*小箭头*/
.solution .solution_menu ul li i{
left: 141px;
top: 14px;
}
.solution .solution_menu ul li i,.solution .solution_menu ul li i em{
display: block;
width: 0px;
height: 0px;
border: 12px solid transparent;
border-right-color: #40a7f0;
position: absolute;
}
.solution .solution_menu ul li i em{
left: -11px;
border-right-color: #fff;
top:-12px;
}
.solution .solution_menu ul li i,.solution .solution_menu ul li i em{
display: block;
width: 0px;
height: 0px;
border: 12px solid transparent;
border-right-color: #40a7f0;
position: absolute;
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
