导航中英文切换


 <div class="MainNav">
            <ul>
                <li id="nav1">
                    <a class="navA" href="javascript:void(0);">首页</a>
                    <div class="en"><a href="index.php">home</a></div>
                </li>
                <li id="nav2">
                    <a class="navA" href="javascript:void(0);">了解图界</a>
                    <div class="en"><a href="about.php">about us</a></div>
                </li>
                <li id="nav3">
                    <a class="navA" href="javascript:void(0);">服务模式</a>
                    <div class="en"><a href="fuwu.php">ADVANTAGES</a></div>
                    
                </li>
                <li id="nav4">
                    <a class="navA" href="javascript:void(0);">作品案例</a>
                    <div class="en"><a href="case.php">RODUCT&SERVICE</a></div>
                    <div class="submenu">
                        <div class="subnav">
                            <dl>
                                <dd datanum="4TXVZCN6QV0P"><a href="case.php?id=121">广告片</a></dd>
                                <dd datanum="4TXVZCRWG1LR"><a href="case.php?id=122">宣传片</a></dd>
                                <dd datanum="4TXVZCUF4KQX"><a href="case.php?id=123">动画</a></dd>
                          
                            </dl>
                        </div>
                        <div class="info">
                                        <dl datanum="4TXVZCN6QV0P" style="display: none;">
                                            <dt><a href="javascript:void(0)"><img src="/shcyhl201512107482/UploadFiles/image/20160428/ys1.jpg" /></a></dt>
                                            <dd><a href="javascript:void(0)">10年拍摄经验,7年服务经验,2500多部作品积累,上千知名企业信赖的伙伴。宣传片,没有人能比天橙更了解!</a></dd>
                                        </dl>
                                        <dl datanum="4TXVZCRWG1LR" style="display: none;">
                                            <dt><a href="javascript:void(0)"><img src="/shcyhl201512107482/UploadFiles/image/20160428/ys2.jpg" /></a></dt>
                                            <dd><a href="javascript:void(0)">国际国内大牌导演团队,一流策划、一流演职人员,电影级设备及后期配置,给您期待中的TVC广告!</a></dd>
                                        </dl>
                                        <dl datanum="4TXVZCUF4KQX" style="display: none;">
                                            <dt><a href="javascript:void(0)"><img src="/shcyhl201512107482/UploadFiles/image/20160428/ys3.jpg" /></a></dt>
                                            <dd><a href="javascript:void(0)">CCTV6微电影协拍团队,戛纳电影节展映影片拍摄团队,拍微电影,就找盛视天橙!</a></dd>
                                        </dl>
                              
                        </div>
                        <div class="clear"></div>
                    </div>
                </li>
                <li id="nav5">
                    <a class="navA" href="javascript:void(0);">图界资讯</a>
                    <div class="en"><a href="news.php">Cooperation</a></div>
                    <div class="submenu">
                        <div class="subnav">
                            <dl>
                                <dd datanum="4TXW146SW3IX"><a href="news.php?id=124">图界动态</a></dd>
                                <dd datanum="4TXW19CX3W3Z"><a href="news.php?id=125">新闻解析</a></dd>
                                <dd datanum="4TXW19CX3W3ZSA"><a href="news.php?id=125">图界主张</a></dd>
                            </dl>
                        </div>
                        <div class="info">
                                        <dl datanum="4TXW146SW3IX" style="display: none;">
                                            <dt><a href="javascript:void(0)"><img src="/shcyhl201512107482/UploadFiles/image/20160428/hz1.jpg" /></a></dt>
                                            <dd><a href="javascript:void(0)">盛视天橙在全国300个省市和地区设有服务网点,面向全国承接业务,欢迎您的咨询。</a></dd>
                                        </dl>
                                        <dl datanum="4TXW19CX3W3Z" style="display: none;">
                                            <dt><a href="javascript:void(0)"><img src="/shcyhl201512107482/UploadFiles/image/20160428/hz2.jpg" /></a></dt>
                                            <dd><a href="javascript:void(0)">标准化、专业化的制作流程,让客户能把控关键步骤,高效率地完成拍摄,为您呈现优质的影视产品!</a></dd>
                                        </dl>
                                         <dl datanum="4TXW19CX3W3ZSA" style="display: none;">
                                            <dt><a href="javascript:void(0)"><img src="/shcyhl201512107482/UploadFiles/image/20160428/hz2.jpg" /></a></dt>
                                            <dd><a href="javascript:void(0)">标准化、专业化的制作流程,让客户能把控关键步骤,高效率地完成拍摄,为您呈现优质的影视产品!</a></dd>
                                        </dl>
                        </div>
                        <div class="clear"></div>
                    </div>
                </li>
                <li id="nav6">
                    <a class="navA" href="javascript:void(0);">联系我们</a>
                    <div class="en"><a href="lianxi.php">Works Case</a></div>
                </li>
               
                <div class="clear"></div>
            </ul>
        </div>

<style>
    
.MainNav{float:left;padding: 45px 0 0 0;}
.MainNav li{float:left;position:relative;}
.MainNav li .navA{display:block;font-size:16px;color:#434343;padding: 0 15px;}
.MainNav li.onnav .navA,.MainNav li .navA:hover{color:#ee63a5;}
.MainNav .en{padding: 0 22px;z-index: 10;display: block;text-transform: uppercase;display:none;}
.MainNav .en a{font-size: 13px;color: #434343;}
.MainNav li.onnav .en a,.MainNav li .en a:hover{color:#ee63a5;}
.MainNav .submenu{display:none;position:absolute;top: 20px;z-index:10;padding:10px 0 8px 0;left:0px;width:378px;background:url(../images/ico03.png) no-repeat left 10px;background-size: cover;}
.MainNav .submenu .subnav{float:left;width:105px;min-height: 180px;margin:15px 0 0 0;padding:3px 0 0 0;}
.MainNav .submenu .subnav dd{height:30px;padding-top:6px;}
.MainNav .submenu .subnav dd a{color:#5F5F5F;line-height:30px;padding-left:20px;font-size:14px;display:block;height:30px;}
.MainNav .submenu .subnav dd a:hover{background:#F57E20;color:#FFF4F1;}
.MainNav .submenu .info{float:left;width:248px;margin: 15px 0 0 0;padding: 0 0 0 12px;border-left: 1px solid #DADADA;}
.MainNav .submenu .info dt{width:248px;height:137px;}
.MainNav .submenu .info dt img{display:block;width:248px;height:137px;}
.MainNav .submenu .info dd{font-size:12px;color:#646464;line-height: 19px;padding: 10px 0 0;}
#nav7 .submenu{background:url(../images/ico101.png) no-repeat left 10px;left:-240px;}
#nav7 .submenu .subnav{float:right;border-left: 1px solid #DADADA;}
#nav7 .submenu .info{float:left;}
#nav4 .submenu .info{min-height:220px;}
#nav7 .submenu .subnav{min-height: 160px;}
</style>

<script type="text/javascript">
    $(function () {
        var navID = "1";

        $(".submenu .subnav dd").mouseenter(function () {
            $(this).parents(".submenu").find(".info dl").hide();
            var dlObj = $(this).parents(".submenu").find(".info").find("dl[datanum='" + $(this).attr("datanum") + "']");
            $(dlObj).show();
        });

        //头部介绍与滚动

        //导航选中
        $("#nav" + navID).addClass("onnav");

        //导航点击显示下拉
        $(".MainNav li").hover(function () {
            $(this).find(".submenu").show();
            $(this).find(".en").show();
            $(this).find(".navA").hide();
            $(this).find(".submenu .info dl[datanum='" + $(this).find(".subnav").find("dd:first").attr("datanum") + "']").show();
        },
        function () {
            $(this).find(".submenu").hide();
            $(this).find(".en").hide();
            $(this).find(".navA").show();
        });
    });




</script>

此处评论已关闭