Question

我实现了这个导航栏，对我来说是非常复杂的编码，但是我做了它并设计了它并处理了所有事情。当用户登陆该标签页时，我只是没有设法在标签上设置活动状态。例如，如果我有一个“搞笑”标签，并且用户点击它，我希望它在用户在该页面上时更改颜色/背景...

我在尝试使用它之前尝试解决这个问题，但我没能完成它。

以下是我的代码：

HTML：

<div id="menu">
  <ul class="level1">

    **<li class="level1-li"><a class="level1-a" href="#url">Home</a></li>**

    **<li class="level1-li"><a class="level1-a fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->**

<!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="level2">
  <li><a href="#url">Email</a></li>
  <li><a href="#url">Telephone</a></li>
  <li><a href="#url">Online Form</a></li>
  <li><a href="#url">Snail Mail Address</a></li>
</ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

    **<li class="level1-li"><a class="level1-a fly" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->**
<!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="level2">
    <li><a href="#url">Ski Hire Facilities</a></li>
    <li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="level3">
  <li><a href="#url">Beginners Slopes</a></li>
  <li><a href="#url">Intermediate Slopes</a></li>
    <li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="level4">
  <li><a href="#url">Local</a></li>
  <li><a href="#url">Nearby</a></li>
  <li><a href="#url">With instructor</a></li>
  <li><a href="#url">Snow boarding</a></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li><a href="#url">Expert</a></li>
    </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li><a href="#url">Night Life</a></li>
    <li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="level3">
    <li><a href="#url">Snow Hotel</a></li>
  <li><a href="#url">The Snowman</a></li>
  <li><a href="#url">Ice Cavern</a></li>
  <li><a href="#url">Ski Inn</a></li>
    </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="level3">
    <li><a href="#url">From Airport</a></li>
  <li><a href="#url">In Resort</a></li>
  <li><a href="#url">Multiple Resorts</a></li>
    </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

    **<li class="level1-li"><a class="level1-a fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->**
<!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="level2">
  <li><a href="#url">Where to go</a></li>
  <li><a href="#url">What to do</a></li>
  <li><a href="#url">Places of interest</a></li>
  <li><a href="#url">National parks &amp; Museums</a></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

    **<li class="level1-li left"><a class="level1-a fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->**
<!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="level2">
  <li><a href="#url">Money Exchange</a></li>
  <li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="level3">
  <li><a href="#url">Lift Passes</a></li>
  <li><a href="#url">Insurance</a></li>
  <li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="level4">
  <li><a href="#url">Boots</a></li>
  <li><a href="#url">Skis</a></li>
  <li><a href="#url">Ski Wear</a></li>
  <li><a href="#url">Goggles</a></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  <li><a href="#url">Ski Schools</a></li>
  <li><a href="#url">Snow Report</a></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  <li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="level3">
  <li><a href="#url">Austrian</a></li>
  <li><a href="#url">German</a></li>
  <li><a href="#url">French</a></li>
  <li><a href="#url">English</a></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  <li><a href="#url">Short Breaks</a></li>
  </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

    **<li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>**

    </ul>
  </div>

CSS：

/* ================================================================
  This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/anywidth2.html
  Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
  =================================================================== */
  #menu {width:740px; background: #3aa3d3; height:25px; text-align:center; position:relative; z-index:20;}
  #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
  #menu ul {display:inline-block;}
  #menu li {margin:0; padding:0; list-style:none;}
  #menu li {clear:both;float:none;}
  #menu ul ul {position:absolute; left:-9999px;}
  #menu ul.level1 {margin:0 auto;}
  #menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}
  #menu ul.level1 {background:#3aa3d3;}
  #menu ul.level2 {background:#ae4621;}
  #menu ul.level3 {background:#c98b14;}
  #menu ul.level4 {background:#9f690e;}
  #menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
  #menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:25px; text-decoration:none;padding:0 15px 0 15px;outline:none;}
  #menu ul.level1 li.level1-li a.level1-a {float:left;}
  #menu ul li:hover > ul {visibility:visible; left:0; top:25px;}
  #menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;}
  #menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
  #menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}
  #menu a:hover ul {left:0; top:23px;}
  #menu li.left a:hover ul {left:auto; right:-1px; top:23px;}
  #menu li.left ul a {text-align:right; padding:0 15px 0 15px;}
  #menu a:hover a:hover ul,
  #menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
  #menu li.left a:hover a:hover ul,
  #menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
  #menu a:hover ul ul,
  #menu a:hover a:hover ul ul {left:-9999px;}
  #menu li.left a:hover ul ul,
  #menu li.left a:hover a:hover ul ul {left:-9999px;}
  #menu li a.fly {font-variant: small-caps;}
  #menu li.left ul a.fly {font-variant: small-caps;}
  #menu li a:hover,
  #menu li a.fly:hover {background-color:#555555;}
  #menu li:hover > a,
  #menu ul li:hover > a.fly {background-color:#555555;}
  #menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
  #menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
  #menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
  #menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
  #menu ul, .tabs-outer {overflow:visible;}
  #menu li a {border: none;}
  .main-outer {z-index:10;}/*for IE*/
  .tabs-outer {z-index:11;}/*for IE*/

希望有人可以提供帮助。：）

Answer 1

有一个单独的css类a.active，并为背景和文本设置必要的颜色样式。将活动类添加到需要的html a标记中。例如，当在主页中添加active类时，如下所示

<li class="level1-li"><a class="level1-a active" href="#url">Home</a></li>

a.active { background-color: green; }

Answer 2

您可以这样做，在您创建的每个页面中，您都需要定义特定的id。像

<body id="home">
//your all code
</body>

然后您可以使用Javascript

查看包含该ID的页面

$(document).ready(function(){

$('#home').css({'background-color':'red', 'color':'#000'});

});

<强>更新

您需要在

之前插入JQuery和js代码

<body>
//all your code



<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('#home').css({'background-color':'red', 'color':'#000'});

    });
</script>
</body>

用户在页面上时，导航栏设置活动标签？

2 个答案: