JQUERY 鼠标移动切换

你可以吧三个标题放一个div里面，三个内容放一个大div里面，代码如下：
<div class="main">
  <div class="title">
    <a href="#">标题01</a>
    <a href="#">标题02</a>
    <a href="#">标题03</a>
  </div>
  <div class="content">
    <div>标题01的内容</div>
    <div>标题01的内容</div>
    <div>标题01的内容</div>
  </div>
</div>
$(document).ready(function(){
 var titles = $("div.title >a");
 var conts  = $("div.content >div");
 titles.first().addClass("now").siblings().removeClass("now");       //默认第一个标题添加样式
 conts.first().show().nextAll().hide();                              //默认第一个内容显示，其他隐藏
 titles.each(function( index ){
  $(this).mouseover(function(){
   $(this).addClass("now").siblings().removeClass("now");      //给鼠标悬浮上的第index个（即当前）标题添加样式
   conts.eq(index).show().siblings().hide();                   //第index个内容显示，其他隐藏
  });
 });
});

如果你的内容里面还有div的话，你可以给他的外层div添加一个属性，比如class="aa"为了标示，么有实际意义
比如：
<div class="content">
    <div class="aa"><div>asdsa</div>标题01的内容</div>
    <div class="aa">标题01的内容</div>
    <div class="aa">标题01的内容</div>
  </div>
那你取得内容是： conts = $("div.content >div.aa");