zzy之前端tab切换效果思路

css 样式定义
.tab{}
.tab .tab-title-box{}
.tab .tab-title{}
.tab .tab-title-active{}
.tab .tab-content-box{}
.tab .tab-content{ display: none; }
.tab .tab-content-active{ display: block; }

单页面多个切换之不用显示样式 .tab{}
单页面多个切换之不用显示样式 .tab .tab-title-box{}
单页面多个切换之不用显示样式 .tab .tab-title{}
单页面多个切换之不用显示样式 .tab .tab-title-active{}
单页面多个切换之不用显示样式 .tab .tab-content-box{}
单页面多个切换之不用显示样式 .tab .tab-content{ display: none; }
单页面多个切换之不用显示样式 .tab .tab-content-active{ display: block; }
html结构层次
<div id/class="单页面多个切换之不用显示样式">
    <div class="tab">
        <div class="tab-title-box">
            <div class="tab-title">zzy_tab_one<div>
            <div class="tab-title">zzy_tab_two<div>
            <div class="tab-title">zzy_tab_more<div>
        <div>
        <div class="tab-content-box">
            <div class="tab-content">zzy_tab_one<div>
            <div class="tab-content">zzy_tab_two<div>
            <div class="tab-content tab-content-active">zzy_tab_more<div>
        <div>
    <div>

<div>

js部分 基于jquery
$('.tab').each(function(){
    var tab_title_box      = $(this).find( '.tab-title-box' );
    var tab_content_box    = $(this).find( '.tab-content-box' );
    tab_title_box.find( '.tab-title' ).each(function( i ){
        var tab_title      = $(this);
        tab_title.mouseover(function(){
            var tab_content    = tab_content_box.find( '.tab-content' ).eq(i);
            tab_title.addClass( 'tab-title-active' );
            tab_title.siblings().removeClass( 'tab-title-active' );
            tab_content.addClass( 'tab-content-active' );
            tab_content.siblings().removeClass( 'tab-content-active' );
        });
    });
});