CSS代码不起作用 [英] css code is not working

问题描述

我想要的是，当我在任何导航按钮上工作时，它将是红色的，而其他的将是相同的颜色..在这里，我有jstl标签..这就是为什么它不工作在jsfiddle ..where这里的问题是什么？

  body {width：100％; line-height：1;} header {background：#fff;宽度：100％;身高：76px;位置：固定; top：0;左：0; z-index：100;} a.active {color：red;} nav {float：right; padding：20px;} ul {list-style：none;} li {display：inline-block;向左飘浮; padding：10px} .current {color：red;} @ media only screen and（max-width：640px）{header {position：absolute; }＃menu-icon {display：inline-block; } nav ul，nav：active ul {display：none;位置：绝对; padding：20px;背景：#fff;边框：5px固体＃444; right：20px;顶部：60px;宽度：50％; border-radius：4px 0 4px 4px; } nav li {text-align：center;宽度：100％;填充：10px 0;保证金：0; } nav：hover ul {display：block; }}  

< script src =https：// ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><header> < NAV> < UL> < li>< a href =< s：url value ='/ home'/>类= 当前 >家庭和LT; / A> < /锂> < li>< a href =< s：url value ='/ work'/>> work< / a> < /锂> < li>< a href =< s：url value ='/ others'/>>其他< / a> < /锂> < / UL> < / nav>< / header>

解决方案

有几个地方需要改变，作为一个起点。首先在html中，将current改为active

 < li>< a href =...class =活性>家庭和LT; / A>< /锂> 
  

和JS中，

 $（ul li a）。 .removeClass（active）; 
 $（this）.addClass（active）; 
}）; 
}）; 
  

jsfiddle

I want that when I work on any of the navigation button it will be color red,while the others will be the same color..Here I have the jstl tag..thats why it is not working in jsfiddle..where is the problem here?

$(document).ready(function(e) {
  $("ul li a").click(function() {
    $("nav a").removeClass("active");
    $(this).addClass("active");
  });
});

body {
  width: 100%;
  line-height: 1;
}
header {
  background: #fff;
  width: 100%;
  height: 76px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
a.active {
  color: red;
}
nav {
  float: right;
  padding: 20px;
}
ul {
  list-style: none;
}
li {
  display: inline-block;
  float: left;
  padding: 10px
}
.current {
  color: red;
}
@media only screen and (max-width: 640px) {
  header {
    position: absolute;
  }
  #menu-icon {
    display: inline-block;
  }
  nav ul,
  nav:active ul {
    display: none;
    position: absolute;
    padding: 20px;
    background: #fff;
    border: 5px solid #444;
    right: 20px;
    top: 60px;
    width: 50%;
    border-radius: 4px 0 4px 4px;
  }
  nav li {
    text-align: center;
    width: 100%;
    padding: 10px 0;
    margin: 0;
  }
  nav:hover ul {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <ul>
      <li><a href="<s:url value='/home'  />" class="current">Home</a>
      </li>
      <li><a href="<s:url value='/work' />">work</a>
      </li>
      <li><a href="<s:url value='/others' />">Others</a>
      </li>
    </ul>
  </nav>
</header>

解决方案

There are a couple of places that you need to change as a starting point. First in the html, change current to active

<li><a href="..." class="active">Home</a></li>

and in JS,

$(document).ready(function(e) {   
    $("ul li a").click(function(){
        $("ul li a").removeClass("active");
        $(this).addClass("active");
    });
});

jsfiddle

这篇关于CSS代码不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！