选项卡切换效果

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>