具有选定状态的CSS精灵菜单（仅CSS）_Css

具有选定状态的CSS精灵菜单（仅CSS）

css

具有选定状态的CSS精灵菜单（仅CSS）,css,Css,我也尝试过“”和Patrik的解决方案，但它对我不起作用。 --->请参阅本文的内容：我不想使用JS 如果我点击一个菜单按钮，它会打开超链接，但该按钮不会变为“选定”状态，直到我点击另一个按钮，该按钮才会保持此状态你能看一下我的源代码并帮我解决我的问题吗 CSS: 菜单的HTML代码： <ul id="menu"> <li class="button1"><a href="../meine_sicht/meine_sicht_lauftext.html" ta

我也尝试过“”和Patrik的解决方案，但它对我不起作用。 --->请参阅本文的内容：

我不想使用JS

如果我点击一个菜单按钮，它会打开超链接，但该按钮不会变为“选定”状态，直到我点击另一个按钮，该按钮才会保持此状态

你能看一下我的源代码并帮我解决我的问题吗

CSS:

菜单的HTML代码：

<ul id="menu">

<li class="button1"><a href="../meine_sicht/meine_sicht_lauftext.html" target="lauftext">MEINE SICHT</a></li>
<BR>

运动学

meine_sicht_lauftext.HTML中的HTML代码：

<body class="button1" bgcolor="#FFFFFF" text="#707173" link="#bd4749" vlink="#bd4749" alink="#bd4749" leftmargin="0" topmargin="0">

在CSS中，您定义了一个

。为每个按钮选择了样式，但您必须自己应用该类样式，例如：
<ul id="menu">
    <li class="button1">
        <a href="/" class="selected">...</a>
    </li>
    <li class="button2">
        <a href="/">...</a>
    </li>
</ul>

您可以通过3种方式添加该类：
在每页上都有一个菜单，其中相应的锚定标记选择了
类
使用Javascript的onClick事件将选定的类添加到锚点

使用服务器端语言将所选的类添加到相应的锚定标记中，因为您知道正在查看哪个页面

如果您对如何实现这些目标有任何疑问，那么我将更详细地解释
编辑
使用JQuery，可以通过以下方式实现：
//wait until DOM is ready
$(document).ready(function(){

    $('#menu li a').click(function() {
        $('#menu li a.selected').removeClass( "selected" );
        $(this).addClass( "selected" );
    });

});

jsFIDLE:
请描述实际问题。呃，对不起-我现在更改了文章…您能在此处链接您的网站或在中表示您的问题吗？“它会打开超链接，但按钮不会更改为所选状态，并保持此状态，直到我单击另一个按钮”-我感到困惑，那么它是否会更改为选定状态？那它呆在哪个州？另外，你不应该在
之后使用
标记，因为这是一种不好的做法（如果你想增加间距，请使用css），请看我头疼的解决方案。您希望它在不实际更改li
的类的情况下工作。您的.selected
不是像：hover
那样的伪类，它是您自己的类，因此您必须自己使用JavaScript编写该行为（即，当您单击它时，将获得分配给它的selected
类）。此外，我不会使用框架集，现在是2012年。谢谢。我明白这一点，但我在这里找到的描述也能做到吗？这里有一个使用CSS而不是笨重的JS的快速解决方案：）首先，您的body标签应该有指定给它们的类。现在，在菜单中，为每个分配类
CSS:body.products ul#menu li.products a{/*定义“选定”按钮的外观，在这里。*/}是-在这个神圣的论坛中：o）向下滚动到答案如果使用框架集，解决方案将不起作用，只有在单击菜单按钮后重新加载整个页面才能起作用。谢谢，嗯，谢谢你，我头疼。现在我正在用Javascript搜索一个解决方案……我读到了关于JQUERY uff的文章，有没有一种简单的方法可以为单击的按钮设置类“selected”并将其他按钮清除为正常状态？对不起，我的问题，但我已经被弄糊涂了…@我的头很痛：谢谢，我在menu.html的头中的代码是这样的：$（function（）{$（'#menu li a'）。单击（function（）{$（'#menu li a.selected'）。removeClass（“selected”）；$（this.addClass（“selected”）；}对吗？
#menu li.button1 a.selected{
    background-position:-317px -5px;
}

//wait until DOM is ready
$(document).ready(function(){

    $('#menu li a').click(function() {
        $('#menu li a.selected').removeClass( "selected" );
        $(this).addClass( "selected" );
    });

});