将类添加到菜单
我正在尝试使用 jquery 将一个类添加到我的 css 菜单中，它会添加当您单击菜单项时选择的类，但它实际上并没有单击超链接。
编辑：它添加了一个 li 类。但是当我单击时，它不会执行任何操作
Html:
<div id="nav">
<nav>
<ul class="topmenu">
<li><a href="home.aspx">Home</a></li>
<li><a href="about.aspx">About</a></li>
<li><a href="contact.aspx">Contact</a></li>
</ul>
</nav>
</div>
jquery:
<script type="text/javascript">
$(function () {
$('.topmenu a:link').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.closest('ul').children('li').removeClass('selected');
$this.parent().addClass('selected');
});
});
</script>
我需要它在分配了“选定”类后单击该链接，很奇怪，因为手动单击似乎不起作用？
CSS：
#nav
{
width: 100%;
height: 30px;
}
nav a.current
{
display: block;
margin: auto;
width: 950px;
}
nav ul
{
list-style: none outside none;
margin: 8px 0 0;
}
nav li
{
float: left;
height: 45px;
left: -45px;
position: relative;
top: -16px;
z-index: 2000;
}
nav li a {
color: #FFFFFF;
text-decoration: none;
}
nav a:link, nav a:visited, nav a:active
{
display: block;
float: left;
font-size: 14pt;
font-weight: normal;
height: 33px;
padding: 11px 17px 0;
}
nav li:hover, .home-link a, .current_page_item a:link, .current_page_item a:visited, a.children_openend, .topmenu li.selected a
{
background: url("images/dc/menu-selected.png") repeat-x scroll 0 0 transparent !important;
color: #FFFFFF;
}
nav a:hover
{
color: #FFFFFF;
}
I am trying to use jquery to add a class to my css menu it adds the class selected when you click on the menu item but it doesnt actually click the hyperlink.
edit: it adds an li class. but when I click, it doesn't do anything
Html:
<div id="nav">
<nav>
<ul class="topmenu">
<li><a href="home.aspx">Home</a></li>
<li><a href="about.aspx">About</a></li>
<li><a href="contact.aspx">Contact</a></li>
</ul>
</nav>
</div>
jquery:
<script type="text/javascript">
$(function () {
$('.topmenu a:link').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.closest('ul').children('li').removeClass('selected');
$this.parent().addClass('selected');
});
});
</script>
I need it to click the link once its assigned the class "selected", strange because the manual click doesnt seem to work?
css:
#nav
{
width: 100%;
height: 30px;
}
nav a.current
{
display: block;
margin: auto;
width: 950px;
}
nav ul
{
list-style: none outside none;
margin: 8px 0 0;
}
nav li
{
float: left;
height: 45px;
left: -45px;
position: relative;
top: -16px;
z-index: 2000;
}
nav li a {
color: #FFFFFF;
text-decoration: none;
}
nav a:link, nav a:visited, nav a:active
{
display: block;
float: left;
font-size: 14pt;
font-weight: normal;
height: 33px;
padding: 11px 17px 0;
}
nav li:hover, .home-link a, .current_page_item a:link, .current_page_item a:visited, a.children_openend, .topmenu li.selected a
{
background: url("images/dc/menu-selected.png") repeat-x scroll 0 0 transparent !important;
color: #FFFFFF;
}
nav a:hover
{
color: #FFFFFF;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您可以使用手动触发点击
所以在您执行完后
只需在末尾标记一个触发器（）调用：
编辑：
您可以手动重定向浏览器而不是这样做，
.trigger（）不会像您那样工作在 li 上触发它，而不是在 a 上。我很抱歉。
再次编辑：
如果我理解正确，您希望在单击链接并加载新页面后 li 仍然具有该类。你可以用 CSS 来做到这一点。如果您为每个列表项指定一个与页面相关的类，例如：
在每个页面上，向 body 标记添加一个 id：
然后您可以使用以下方法对当前选定的 li 进行样式设置：
这有帮助吗？
You can trigger a click manually by using
So after you do
Just tag a trigger() call on the end:
Edit:
Instead of doing that, you could just manually redirect the browser:
The .trigger() wouldn't work as you are triggering it on the li, not the a. My apologies.
Edit again:
If I understand you right, you want the li to still have the class once the link has been clicked and the new page loaded. You could do this with CSS. If you give each list item a class relating to the page, eg:
And on each page, add an id to the body tag:
Then you can do your styling to th currently selected li using:
Does that help?
嗯。如果您希望链接“被点击”，则必须删除以下行：
但是，链接将转到其
href中设置的页面，我不知道这是否是您想要的。希望这有帮助。干杯
Mmm. If you want the link to 'be clicked', you have to remove the following line:
But, the link will go to the page set in its
href, I don't know if that's you want.Hope this helps. Cheers
您的代码正在执行您告诉它执行的操作：事件处理程序内的
e.preventDefault();会阻止该事件的默认行为。Your code is doing what you tell it to do:
e.preventDefault();inside an event handler prevent the default behavior for that event.这是因为您使用的是
e.preventDefault();，它禁用了的默认行为。另外，请注意 jQuery 目前不支持
:link选择器。因此，您的选择器只能在某些浏览器中工作。您可能想改用它：
编辑：
当然，点击链接将导致加载新页面，并且之前对 DOM 所做的任何更改都将丢失。
如果您只是想为当前页面设置链接样式，请尝试一下：
加载页面时，它将获取
window.locationpathname 中的最后一项code>，并将其连接到选择器中以选择该页面的元素。It's because you're using
e.preventDefault();, which disabled the default behavior of the<a>.Also, be aware that jQuery doesn't currently support the
:linkselector. As such, your selector will only work in certain browsers.You may want to use this instead:
EDIT:
Of course following the link will cause a new page to load, and any changes to the DOM previously made will be lost.
If you're just trying to style the link for the current page, give this a try:
When the page loads, it will get the last item in the
pathnameofwindow.location, and concatenate that into a selector to select the<a>element for that page.