选项卡切换效果
JQ
$(function() {
$(".how_use ul li").click(function() {
var index = $(".how_use ul li").index(this);
$(".how_use ul li").eq(index).find("a").addClass("moa");
$(this).siblings().find("a").removeClass("moa");
$(".who_mian").eq(index).show().siblings(".who_mian").hide();
});
});
HTML
<div class="how_use" style="cursor: pointer;">
<ul>
<li><a class="moa">谁可以用</a></li>
<li><a>谁在用</a></li>
<li><a>用户说</a></li>
</ul>
</div>
<div class="who_mian">
<ul class="who_list1">
<li class="whobg1">
<h2>
高层管理者</h2>
<p>
高效率，低成本</p>
<p>
合作伙伴共双赢</p>
</li>
<li class="whobg2">
<h2>
中层管理者</h2>
<p>
轻松管理人和事</p>
<p>
把握全局给指导</p>
</li>
<li class="whobg3">
<h2>
基层管理者</h2>
<p>
信息汇总无烦恼</p>
<p>
向上汇报搭桥梁</p>
</li>
<li class="whobg4">
<h2>
员工</h2>
<p>
事项规划有节奏</p>
<p>
高效快捷业绩成</p>
</li>
</ul>
</div>
<div class="who_mian" style="display: none;">
<img src="images/help_logo_03.png" width="1180" height="384" />
</div>
<div class="who_mian" style="display: none;">
<ul class="user_list1">
<li>
<p class="user_img">
<img src="images/case_logo_05.png" width="111" height="110" /></p>
<p class="user_text">
2针对通用性的办公需求，今目标已经挺好用了，其功能可以满足我们的要求；并且，就办公自动化系统来说，可以选择互联网式的，而无需定制化开发。</p>
<p class="user_name">
——鲁玉红 市场总监</p>
</li>
<li>
<p class="user_img">
<img src="images/case_logo_05.png" width="111" height="110" /></p>
<p class="user_text">
每个案子都是一个历史，都是一个故事。收集、还原并让它公正客观的呈现在法律面前，是严肃且具有重大价值的事情，而今目标，正是适合于帮助我们实现这些目标的有力工具。</p>
<p class="user_name">
——鲁玉红 市场总监</p>
</li>
<li>
<p class="user_img">
<img src="images/case_logo_05.png" width="111" height="110" /></p>
<p class="user_text">
我喜欢今目标的工作记录永久保存，等我回斯里兰卡的时候，还能看到过去创业时候的工作记录。</p>
<p class="user_name">
——鲁玉红 市场总监</p>
</li>
<li>
<p class="user_img">
<img src="images/case_logo_05.png" width="111" height="110" /></p>
<p class="user_text">
我很喜欢用今目标的广播应用，以前发个通知都要用红头文件等纸质文件，现在发个广播就可以了。</p>
<p class="user_name">
——鲁玉红 市场总监</p>
</li>
</ul>
</div>
