简单滑动内容区域

.cnt{
        background-color:#ccc;
        width:200px;
        
        
}
.showContent{
        display:block;
}
.hideContent{
        display:none;
}


<div id="tabs6">
  <ul>
    <li><a href="#" title="Link 1"><span id="tabId1">Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span id="tabId2">Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span id="tabId3">Link 3</span></a></li>
    <li><a href="#" title="Longer Link Text"><span id="tabId4">Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span id="tabId5">Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span id="tabId6">Link 6</span></a></li>
        <li><a href="#" title="Link 7"><span id="tabId7">Link 7</span></a></li>
  </ul>
</div>
<div id="content">
        <ul><li class="showContent"><div class="cnt">This is tab1 Content</div></li>
                <li class="hideContent"><div class="cnt">This is tab2 Content</div></li>
                <li class="hideContent"><div class="cnt">This is tab3 Content</div></li>
                <li class="hideContent"><div class="cnt">This is tab4 Content</div></li>
                <li class="hideContent"><div class="cnt">This is tab5 Content</div></li>
                <li class="hideContent"><div class="cnt">This is tab6 Content</div></li>
                <li class="hideContent"><div class="cnt">This is tab7 Content</div></li>
        </ul>
</div>
<div style="margin:0px;padding:0px;border:1px solid #000;diplay:block">some other message</div>

//添加事件函数
    var tabDiv = document.getElementById('tabs6');
    EventUtil.addHandler(tabDiv,'mouseover',doMouseOver);

//触发函数
function doMouseOver(event){
    var event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if(target.tagName.toLowerCase() == 'span'){
        changeContent(target.id);
    }
}

//改变内容显示
function changeContent(id){
    var index = Number(id.substring(id.length-1,id.length)) - 1;
    
    var content = document.getElementById('content');
    var contentDiv = content.getElementsByTagName('li');
    for(var i=0,len = contentDiv.length;i < len;i++){
        if(i == index){
            contentDiv[index].className = 'showContent';
        }else{
            contentDiv[i].className = 'hideContent';
        }
    }
}