效果图：
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="../jquery-1.12.4.js"></script> 7 <script type="text/javascript"></script> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 body{ 14 padding: 100px 30%; 15 } 16 ul{ 17 list-style: none; 18 height: 30px; 19 line-height: 30px; 20 } 21 li{ 22 float: left; 23 width: 100px; 24 background: url("bg_1.png") repeat-x; 25 border:1px solid #A1AFB9; 26 border-bottom: none; 27 margin-right: 5px; 28 text-align: center; 29 cursor: pointer; 30 position: relative;/*解决ie67存在的兼容问题*/ 31 } 32 .content{ 33 width: 400px; 34 border: 1px solid #A1AFB9; 35 padding: 10px; 36 height: 145px; 37 } 38 li.one{ 39 background: #fff; 40 } 41 li:hover{ 42 background: url("bg_3.png") repeat-x; 43 } 44 </style> 45 <script> 46 $(function () { 47 $(".content div:gt(0)").hide(); 48 $("li").click(function () { 49 $(this).addClass("one").siblings().removeClass("one"); 50 var index = $("li").index(this); 51 $('.content div').eq(index).show().siblings().hide(); 52 }) 53 }) 54 </script> 55</head> 56<body> 57<div class="optionCard"> 58 <ul> 59 <li class="one">菜单1</li> 60 <li>菜单2</li> 61 <li>菜单3</li> 62 </ul> 63 <div class="content"> 64 <div>随着移动互联网的兴起，互联网行业正向更加智能化的Web3.0时代迈进，中国互联网行业进入了高速发展的势态，PHP语言已经为大部分企业广泛应用和重视（如：新浪、百度、 65腾讯、TOM、淘宝、搜狐、网易等）PHP语言是各大IT公司首选的互联网编程语言。PHP开发优势明显，未来发展空间巨大，IT行业急需PHP开发人才。 </div> 66 <div>实际上Internet表示的意思是互联网，又称网际网路，根据音译也被叫做因特网、英特网，是网络与网络之间所串连成的庞大网络，这些网络以一 67组通用的协议相连，形成逻辑上的单一且巨大的全球化网络，在这个网络中有交换机、路由器等网络设备、各种不同的连接链路、种类繁多的服务器和数不尽的计算机、终端。 68使用互联网可以将信息瞬间发送到千里之外的人手中，它是信息社会的基础。</div> 69 <div>因特网始于1969年的美国。是美军在ARPA（阿帕网，美国国防部研究计划署）制定的协定下，首先用于军事连接，后将美国西南部的加利福尼亚大学洛杉矶分校、斯坦福大学 70研究学院、UCSB（加利福尼亚大学）和犹他州大学的四台主要的计算机连接起来。这个协定由剑桥大学的BBN和MA执行，在1969年12月开始联机。</div> 71 </div> 72</div> 73</body> 74</html>