前端的坑,真的一不小心就进去了之导航栏背景切换

  • A+
所属分类:CSS web前端开发

前端的坑,真的一不小心就进去了之导航栏背景切换

         本来高高兴的去写代码,自己准备做一个组件库,以后开发的时候就可以随时用随时引入了,但是一上午却只做了两个组建,好吧承认我傻了,没有注重好细节。

事情的经过是这样的:我准备做一个导航栏,头部导航栏,这个导航栏需要在头部固定,且随着页面滚动一直固定在上方,并且在切换菜单是需要有颜色的变化。如下图

前端的坑,真的一不小心就进去了之导航栏背景切换

刚开始建立都是很顺利的,样式和前端代码都书写完毕:如下

html 代码:

<div class="header">
      <div class="header-container">
          <h1 class="logo fl" title="让客户与企业紧密相连"><a href=""></a></h1>
          <div class="btn flr">
              <a href="">登录</a>
              <a href="" class="reg ml_10" target="_blank">注册</a>
          </div>
          <div class="nav fl " >
              <a href="#">首页</a></li>
              <a href="#" class="cur" >产品</a>
              <a href="#">案例</a>
              <a href="#">价格</a>
              <a href="#">下载</a>
              <a href="#">代理合作</a>
              <a href="#">帮助</a>
          </div>
      </div>
  </div>

CSS样式:

/*公共样式*/
body{
 font-family: "微软雅黑";
 font-size: 16px;
}
ul,li,a{
 list-style: none;
 text-decoration: none;
}
.header .logo a, .header .btn a {
    background:url(../img/ec_gw.png) no-repeat;
}
/*头部固定导航栏*/
.header {
    width: 100%;
    border-top: 5px solid #fff;
    border-bottom: 1px solid #cececc;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 101;
}
.header-container {
    height: 70px;
    background: url("/www/images/new/wBg.png") repeat;
    // border-bottom: 1px #cecece solid;
    overflow: hidden;
    z-index: 300;
    width: 1030px;
    margin: 0 auto;
}
.header .logo {
    margin: 12px 0 0 0;
}
.header .logo a {
 
    display: inline-block;
    /*background-position: 0 -711px;*/
    // width: 270px;
    width: 101px;
    height: 51px;
}
.fl{
 float: left;
}
.flr{
 float: right;
}
.header .nav {
    font-size: 14px;
    height: 70px;
    margin-left: 90px;
    // margin: 26px 48px 0 40px;
    // position: absolute;
    // left: 234px;
}
.header .nav li{
 float: left;
}
.header .nav a {
    display: inline-block;
    height: 70px;
    line-height: 70px;
    color: #000;
    margin-right: 50px;
}
.header .nav .cur,
.header .nav a:hover{
    color: #52c018;
}
.header .btn {
    margin: 21px 0 0 0;
    font-size: 14px;
    background: #fff;
    position: relative;
    z-index: 99;
}
.header .btn a {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-position: -210px -364px;
    display: inline-block;
    color: #4a5055;
}
.header .btn a:hover {
    background-position: -210px -397px;
}
.header .btn .reg {
    background-position: -148px -534px;
    color: #fff;
}
.header .btn .reg:hover {
    background-position: -148px -567px;
}
然而用jquery实现字体颜色切换的时候,却怎么也无法改变颜色,我折腾了好久,搜了很多博客文章都没有相应的解决办法,把样式改成li嵌套a标签还是不行,我已经在风中凌乱了,原谅我快要发疯了;
JS代码:
//头部导航栏
     $(".nav a").click(function() {
    
      
       $(this).siblings('a').removeClass('cur');  // 删除其他兄弟元素的样式
       $(this).addClass('cur');                            // 添加当前元素的样式
    });
最后发现了一个致命的错误,也是一个很容易忽略的错误,那就是对a标签的处理。通常a标签的样式是:
<a herf="" class=""></a>
但就是因为这个错误让我的字体颜色一直无法刷新,因为当herf的值为空时,就会刷新当前页面,导致所有文件重新加载,使得页面状态一直为初始值,而导航栏字体颜色也不会随着点击而改变。
解决办法:
herf=""修改为 herf="#"即可解决问题,好吧呢么简单的问题让我研究了呢么久,真的是记忆深刻,想死的心都有了,特此写下文章提醒自己,也给正在学习前端的小白们一个警醒。
weinxin
我的微信
这是我的微信扫一扫
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: