我有一个纯粹的CSS下拉导航。我想强制我的页面上的标签保持活动但我不知道如何实现这一点，任何人都可以帮助我吗？另外，你看到单独按钮的原因是因为我用图像替换它们，我只是用颜色作为占位符。
<!DOCTYPE html>
<html>
<head>
<title>RapidCharge</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
* {margin:0;}
html{margin:0;padding:0;height:100%;}
body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333;background:url(images/bg_rc.png) repeat-x top center transparent;background-color:#FFF; margin:0;padding:0;}
img{border:none}
#nav{list-style:none;float:right;width:715px;height:52px;margin:0;padding:0;}
#nav li{float:left;padding:0;}
#nav li:hover{position:relative}
#nav a{overflow:hidden;float:left;width:141px;height:52px;text-decoration:none;}
#nav .btn-home{margin-right:2px;background-color:#006600;}
#nav .btn-about{margin-right:2px;background-color:#006600;}
#nav .btn-products{margin-right:2px;background-color:#006600;}
#nav .btn-hiw{margin-right:2px;background-color:#006600;}
#nav .btn-contact{margin-right:2px;background-color:#006600;}
#nav li:hover .btn-home{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-about{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-products{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-hiw{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-contact{background-color:#009999;}
#nav .drop{width:141px;position:absolute;top:52px;left:0;display:none}
#nav .drop ul{border-bottom:1px solid #FFF;background-color:#4b4b4b;list-style:none;position:relative;margin:0;padding:0}
#nav .drop li{float:none;position:static;vertical-align:top;line-height:20px;width:100%;margin:0;padding:0}
#nav .drop li:first-child{background:none;border:none}
#nav .drop li a{color:#FFF;border-top:1px solid #FFF;float:none;display:block;height:auto;overflow:hidden;position:relative;z-index:20;padding:0;background-color: #4b4b4b;}
#nav .drop li:hover a,.rc-nav .drop li a:hover{text-decoration:none;background-color:#6a6a6a;}
#nav .drop li a .text{overflow:hidden;border:none;color:#FFF;cursor:pointer;padding:8px 5px 4px 13px;text-align:left;font-family:Verdana, Arial, Helvetica, sans-serif;}
#nav .drop li:hover .text,.rc-nav .drop li a:hover .text{color:#f98a1f}
#nav li:hover .drop,.rc-nav .drop li span{display:block}
</style>
</head>
<body>
<div class="rc-nav">
<ul id="nav">
<li>
<span id="home"><a class="btn-home" href="#"></a></span></li>
<li>
<span id="about"><a class="btn-about" href="#"></a></span>
<!--drop-->
<div class="drop">
<ul id="subNav">
<li><a href="#"><span style="cursor:pointer;" class="text">Blah Blah</span></a></li>
<li><a href="#"><span style="cursor:pointer;" class="text">Blah Blah</span></a></li>
</ul>
</div>
</li>
<li>
<span id="products"><a class="btn-products" href="#"></a></span>
<!--drop-->
<div class="drop">
<ul id="subNav">
<li><a href="#"><span style="cursor:pointer;" class="text">Blah Blah</span></a></li>
</ul>
</div>
</li>
<li>
<span id="howitworks"><a class="btn-hiw" href="#"></a></span>
<!--drop-->
<div class="drop">
<ul id="subNav">
<li><a href="#"><span style="cursor:pointer;" class="text">Blah Blah</span></a></li>
<li><a href="#"><span style="cursor:pointer;" class="text">Blah Blah</span></a></li>
<li><a href="#"><span style="cursor:pointer;" class="text">Blah Blah</span></a></li>
</ul>
</div>
</li>
<li>
<span id="contact"><a class="btn-contact" href="#"></a></span>
</li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：0)
当你在浏览器中更改URL时，我还没有真正找到一种'理想'的方法来实现这一点。在我自己的一个方面，我已经完成了这个......我是怎么做到的这样：
请记住，我正在使用symfony2框架，但您也可以在常规HTML中执行相同的操作。首先，我的导航：
<!-- BEGIN NAVIGATION -->
<nav id="nav">
<ul class="menu collapsible shadow-bottom">
<li><a href="{{ path('AwsAdminBundle_homepage') }}" class="{% block dashclass %}{% endblock dashclass %}"><img src="{{ asset('inc/admin/img/icons/packs/fugue/16x16/dashboard.png')}}">Dashboard</a></li>
<li>
<a href="#" class="{% block pageclass %}{% endblock pageclass %}"><img src="{{ asset('inc/admin/img/icons/packs/fugue/16x16/document.png')}}">Pages</a>
<ul class="sub">
<li><a href="{{ path('pages') }}">Page Management</a></li>
<li><a href="#">Top Navigation</a></li>
<li><a href="#">Footer Navigation</a></li>
</ul>
</li>
<li>
<a href="#" class="{% block userclass %}{% endblock userclass %}"><img src="{{ asset('inc/admin/img/icons/packs/fugue/16x16/users.png') }}">Users</a>
</li>
<li>
<a href="#" class="{% block settingclass %}{% endblock settingclass %}"><img src="{{ asset('inc/admin/img/icons/packs/fugue/16x16/gear.png') }}">Settings</a>
<ul class="sub">
<li><a href="">Global Settings</a></li>
<li><a href="">Employee Departments</a></li>
<li><a href="">Employee Positions</a></li>
</ul>
</li>
</ul>
</nav>
所以在这里，您可以看到在导航中显示的主链接中，我有一个默认为空白的类..但是如果我传入一个类进入，那么它将显示在那里而不是在最后..我在页面中使用课程expand ...
现在我们来看看Javascript ..
jQuery.fn.initMenu = function() {
return this.each(function() {
$('li:has(ul)', this).each(function() {
$('>a', this).append("<span class='arrow'></span>");
});
$('.current', this).each(function() {
$(this).removeClass('current');
});
$('.sub', this).hide();
$('.expand', this).each(function() {
if($(this)+':has(ul)') {
$(this).next().show();
}
$(this).addClass('active current active-icon');
$(this).removeClass('non-active-icon');
});
$('li.expand > .sub', this).show();
$('li.expand > sub', this).prev().addClass('active');
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(this).hasClass('active-icon')) {
$(this).addClass('non-active-icon');
$(this).removeClass('active-icon');
} else {
$(this).addClass('active-icon');
$(this).removeClass('non-active-icon');
}
if($(parent).hasClass('noaccordion')) {
if (theElement[0] == undefined) {
// do nothing..
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
}
else {
$(this).prev().removeClass('active');
$(this).prev().removeClass('active-icon');
}
});
return false;
}
else {
if(theElement.hasClass('sub') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.sub:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
$(this).prev().removeClass('active-icon');
}
);
return false;
}
return false;
}
if(theElement.hasClass('sub') && !theElement.is(':visible')) {
$('.sub:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
$(this).prev().removeClass('active-icon');
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
});
return false;
}
}
}
);
});
};
这段代码真正要看的是：
$('.current', this).each(function() {
$(this).removeClass('current');
});
$('.sub', this).hide();
$('.expand', this).each(function() {
if($(this)+':has(ul)') {
$(this).next().show();
}
$(this).addClass('active current active-icon');
$(this).removeClass('non-active-icon');
});
首先，我从所有导航元素中移除current类（这只是一个图形更改）..然后我确保隐藏所有子菜单...从这里，我运行我的搜索对于班级expand，如果它有一个子菜单，那么此时我们会显示它..
这并不完全适合您的情况，但希望它会帮助您顺利完成它的工作......
...问候
答案 1 :(得分：0)
如果我理解正确，请修改以下CSS选择器
#nav li:hover .btn-home, #nav li .btn-home.active{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-about, #nav li .btn-about.active{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-products, #nav li .btn-products.active{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-hiw, #nav li .btn-hiw.active{margin-right:2px;background-color:#009999;}
#nav li:hover .btn-contact, #nav li .btn-contact.active{background-color:#009999;}
然后，根据您的URL结构，实现某种jQuery将.active类添加到适当的页面（甚至可以是服务器端代码）。这是未经测试的，而且效率很低，但它应该指向正确的方向。
var pages = {
'home.html': '.btn-home',
'about.html': '.btn-about',
'products.html': '.btn-products',
'hiw.html': '.btn-hiw',
'contact.html': '.btn-contact'
};
$(function() {
var filename = url.substring(url.lastIndexOf('/')+1);
$(filename).addClass('active');
});