onclick / hover li tabs时div上的内容更改

Question

我正在尝试使用jquery实现以下功能。

示例：在此页面http://www.adorama.com/pages/FSE-state?mode=state（页面底部和页脚上方）悬停侧边标签上内容更改div

我看到了多个解决方案，例如：eq和#id's

<div id="categoryWidet">
     <ul>
       <li>Category 1</li>
       <li>Category 2</li>
       <li>Category 3</li>
     </ul>
     <div>Category 1 content</div>
     <div>Category 2 content</div>
     <div>Category 3 content</div>

</div>

任何人都可以建议一个坚实的解决方案。

谢谢！

Answer 1

这是一个非常简单的实现，掌握了主要想法。

http://jsfiddle.net/fenderistic/L2cz3/

HTML

 <table border=1>
   <tr>
       <td id=c1>content 1</td><td rowspan=3><div id=c>content1</div></td>
   </tr>
   <tr>
       <td id=c2>content 2</td>
   </tr>
   <tr>
       <td id=c3>content 3</td>
   </tr> 
 </table>

JS

$( "td" ).hover(function() {

  $("#c").html($(this).html());

});