js 统一头部 header 并包含跳转_js 打开新窗口带header-优快云博客

本文链接：https://blog.youkuaiyun.com/wlm_0214/article/details/99680967

本文介绍了一种使用JavaScript和HTML实现的网页导航栏设计，包括动态显示下拉菜单和鼠标悬停效果。通过代码片段展示了如何创建具有登录状态切换的导航条，并实现了响应式布局和交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var navHtml= '<div class="nav-cont">'+
                   '<div class="fl logo">'+
                       '<a href="index1.html" target="_blank"><span></span></a>'+
                   '</div>'+
                   '<ul class="fr clearfix tabs">'+
                       '<li>'+
                           '<a href="index1.html" class="xinfeng" target="_blank">首页</a>'   +
                       '</li>'+
                       '<li class="sencmark">'+
                           '<a href="global.html" class="xinfeng" target="_blank">--</a>'+
                           '<div class="xinfengNav">'+
                               '<div class="xinfengNavUl">'+
                                   '<div class="xinfengNavLi"><a href="global.html" target="_blank">未登录</a></div>'+
                                   '<div class="xinfengNavLi"><a href="https://www.camelfin.com/global/h5/index.html#/login" target="_blank">已登录</a></div>'+
                               '</div>'+
                           '</div>'+
                       '</li>'+
                       '<li>'+
                           '<a href="tradewind.html" target="_blank" class="dt">--</a>'+
                       '</li>'+
                       '<li>'+
                           '<a href="tradecloud.html" class="baitiao" target="_blank">--</a>'+
                       '</li>'+
                       '<li>'+
                           '<a href="tradewindpay.html" class="baitiao" target="_blank">--</a>'+
                       '</li>'+
                       '<li>'+
                           '<a href="about.html" target="_blank">关于我们</a>'+
                       '</li>'+
                       '<li>'+
                           '<a class="login" target="_blank" href="https://www.camelfin.com/global/h5/index.html">登录/注册</a>'+
                       '</li>'+
                   '</ul>'+
               '</div>'

$('.nav').html(navHtml)

$('.sencmark').mouseenter(function(){
   $('.sencmark').addClass('on')
   $('.xinfengNav').show()
}).mouseleave(function(){
   $('.xinfengNav').hide()
   $('.sencmark').removeClass('on')
})
var path_Name=window.location.pathname
var Hash = window.location.hash
path_Name = path_Name+Hash
$('.nav-cont a').each( function( index, val ) {
   var page=$(this).attr('href')
   if( path_Name.indexOf(page)!= -1 ) {
       $(this).addClass('on').siblings().removeClass('on')
       if($(this).text()=='--'){
           $('.nav-cont .tabs li:first-of-type a').first().removeClass('on')
           console.log('00000')
       }
       return
   }
});