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' );
        });
    });
});