点击相应的按钮出现相应的页面的实现

像京东详情页那样，产品那边，点击小的图片会使上面大图进行切换，很多轮播也会采用这手动鼠标hover后改变轮播里面的图片。那么这种是如何实现的呢？？

以下就是我对这种实现方式的一点点小见解。
以下代码是建立在jquery代码基础上，具体的如下：

html端的代码

<ul>
       <li onmouseover="atctiv(this)"   title="sec1">1</li>
       <li onmouseover="atctiv(this)"   title="sec2">2</li>
       <li onmouseover="atctiv(this)"  title="sec3">3</li>
       <li onmouseover="atctiv(this)"  title="sec4">4</li>
   </ul>
    <div id="sec1"  class="section"><p >aaa</p></div>
   <div id="sec2" class="section" style="display: none"><p>bbb</p></div> <!-- 默认情况下是隐藏着的 -->
   <div id="sec3" class="section" style="display: none"><p>ccc</p></div> <!-- 默认情况下是隐藏着的 -->
   <div id="sec4" class="section" style="display: none"><p>ddd</p></div> <!-- 默认情况下是隐藏着的 -->

css端的样式：

 ul>li{
        float: left;
        padding: 10px 50px;
        border: 1px solid #dddddd;
        list-style: none;
        margin: 20px;
        cursor: pointer;
    }
    ul:after{
        content: "";
        display: block;
        clear: both;
    }

js端的代码

function atctiv(e){
  $(".section").hide(); //先隐藏所有的div
  $("#"+ e.title).show(); //将id和title一样的那个div显示出来。
  }