jq table

//html

<div class="centera">
  <p id="oranger"> 
      <a class="hover" href="javascript:;">内容一</a> 
      <a href="javascript:;">内容二</a> 
      <a href="javascript:;">内容三</a> <a href="javascript:;">内容四</a> 
  </p>
  <div id="tablea" class="tablea">
    <div class="box">1111</div>
    <div class="box">2222</div>
    <div class="box">3333</div>
    <div class="box">4444</div>
  </div>
</div>
<div class="centera">
  <p id="oranger"> 
      <a class="hover" href="javascript:;">内容一</a> 
      <a href="javascript:;">内容二</a> 
      <a href="javascript:;">内容三</a> 
      <a href="javascript:;">内容四</a> 
  </p>
  <div id="tablea" class="tablea">
    <div class="box">1111</div>
    <div class="box">2222</div>
    <div class="box">3333</div>
    <div class="box">4444</div>
  </div>
</div>

//css

body {
    margin:0;
    padding:0;
}
ul,li,p {
    list-style:none;
    margin:0;
    padding:0;
}
p {
    border:1px solid #333;
    padding:10px 0;
}
p a {
    padding:0 10px;
    height:30px;
    display:inline-block;
    line-height:30px;
}
.centera {
    padding:20px;
    overflow:hidden;
}
.hover {
    background:#eee;
}
#tablea {
    background:#eee;
}
.box {
    margin:10px;
    display:none
}
 

//js

$(function(){  
  $(".tablea").find(".box:first").show();    //为每个BOX的第一个元素显示        
  $("#oranger a").on("mouseover",function(){ //给a标签添加事件  
     var index=$(this).index();  //获取当前a标签的个数  
     $(this).parent().next().find(".box").hide().eq(index).show(); //返回上一层，在下面查找css名为box隐藏，然后选中的显示  
     $(this).addClass("hover").siblings().removeClass("hover"); //a标签显示，同辈元素隐藏  
  })  
})