li菜单需要的类别为“selected”

当用户点击一个菜单标签时，我希望它保持与它一个白色的按钮选择。li菜单需要的类别为“selected”

这是我的尝试，但它不工作。如果你点击主页按钮，它不会保持白色。

HTML

<ul id="navigation"> 
    <li><a href="#"><span>HOME</span></a></li> 
    <li><a href="/en-us/about.aspx"><span>ABOUT</span></a></li> 
    <li><a href="/en-us/contact.aspx"><span>CONTACT</span></a></li> 
</ul>

CSS：

body{ 
    background-color:orange; 
} 

#navigation a 
{ 
    background: url("http://i52.tinypic.com/spxfdw.png") no-repeat scroll 0 0 transparent; 
    color: #000000; 
    height: 43px; 
    list-style: none outside none; 
    padding-left: 10px; 
    text-align: center; 
    text-decoration: none; 
    width: 116px; 
} 

#navigation a span 
{ 
    padding-right: 10px; 
    padding-top: 15px; 
} 

#navigation a, #navigation a span 
{ 
    display: block; 
    float: left; 

} 

/* Hide from IE5-Mac \*/ 
#navigation a, #navigation a span 
{ 
    float: none 
} 
/* End hide */ 

#navigation a:hover 
{ 

    background: url('http://i51.tinypic.com/2iih9c9.png') no-repeat scroll 0 0 transparent; 
    color: #000000; 
    height: 43px; 
    list-style: none outside none; 
    padding-left: 10px; 
    text-decoration: none; 
    width: 116px; 
    text-align:center 
} 

#navigation a:hover span 
{ 
    background: url(right-tab-hover.gif) right top no-repeat; 
    padding-right: 10px 
} 

#navigation ul 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0 
} 

#navigation li 
{ 
    float: left; 
    list-style: none outside none; 
    margin: 0; 
}

$('#navigation li').click(function() { 
    $('#navigation li').addClass('selected'); 
});

什么想法？

来源

2011-07-29 PD24

，因为我从来没有得到一个有效的解决方案.. – PD24

我在这里看到一些修改。

首先，当您应用选定的课程时，您正在申请所有li项目，这是不正确的。您只想将类应用于点击列表项。

其次，当您单击另一个列表项目时，您想要删除选定的类别。

如此修改的代码如下：

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

最重要的是，你没有selected类。我把一个临时选定类的定义，像这样：

.selected{ 
border: 1px solid #888; 
background-color: #white;

}

这里你可以看到一个工作示例：on JsFiddle

另外，你a元素的背景为灰色。所以你可能想要应用选定的白色背景类到你的元素也..类似于：

$('a', this).addClass('selected'); //apply to anchor element also

当你删除类，按照同样的交易。

所以你要在不同的网页使用按钮的状态。只有页面处于打开状态，Javascript才有效。只要用户转到新页面，所有javascript都将被重置。为了克服这一点，你可以做的这两件事之一：

1）如果您正在使用菜单母版页，添加runat="server"属性列表项，并从后面的代码，选择类从添加到相应的列表内容子页面（可能是你可以在你的主网页公共功能）

//Master page 
    public SetHomeMenu() 
    { 
     liHome.Attributes.Add("class","selected"); 
    } 

    //in Child page 
    Master.SetHomeMenu();

2）如果你想这样做在JavaScript中，你需要阅读您的网址，解析它，然后添加selected类合适li

//put this javascript in your head section or even at the bottom, just before closing 
// body tag </body> 

    $(document).ready(function() { 
     if(window.location.href.indexOf("home")) 
     { 
      $("#navigation li#home").addClass("selected"); 
     } 
     else if(window.location.href.indexOf("about")) 
     { 
      $("#navigation li#about").addClass("selected"); 
     } 
     else if(window.location.href.indexOf("contact")) 
     { 
      $("#navigation li#contact").addClass("selected"); 
     } 

    });

但对于这个工作，你需要id属性添加到列表项，像这样：

<ul id="navigation"> 
    <li id="home"><a href="#"><span>HOME</span></a></li> 
    <li id="about"><a href="/en-us/about.aspx"><span>ABOUT</span></a></li> 
    <li id="contact"><a href="/en-us/contact.aspx"><span>CONTACT</span></a></li> 
</ul>

对于上次使用的解决方案，你需要if语句变成下面这个例子：

如果（window.location.href.indexOf（“家”）> -1）

来源

2011-07-29 13:10:18 iamserious

你能不能告诉我在这个请：HTTP：//的jsfiddle。净/ – PD24

好吧，我只能查看您的示例源。一旦我点击链接，它不会保持选中选项卡。 – PD24

@ PD24：更新为jsfiddle。你能解释一下你说的是什么意思吗？当你点击它时不会留下来？你是否将用户重定向到新页面？ – iamserious

#navigation li.a.seletected a.seletected 
{ 
    background: white; // or background Image or whatever it is your doing to make this  white. 
}

来源

2011-07-29 12:54:27 pat8719

你甚至没有在你的CSS中为'selected'设置一个类。

添加此，它应该工作。

#navigation li .selected { 
    [CSS to make white background here.] 
}

来源

2011-07-29 12:55:16 Devin

它不保持选定.. – PD24

你是什么意思它不保持选中状态？如果您链接到另一个页面，你将需要在类的下一个页面上再次申请该选项卡：当你将它与jQuery的一个页面上的类不是在所有页面持久。 – Devin

所以当用户点击[家]，他们是[讲述]页..我希望要选择的[HOME]选项卡，显示为白色。 – PD24

据我可以告诉你的CSS，你还没有定义selected类的任何样式。

将这个类指定给你的li是不够的。你还需要以你喜欢的方式设计风格。

.selected{ 
background-color:#fff; 
}

（ETC）

来源

2011-07-29 12:55:51

This'd做到这一点。你忘了设置所选类CSS

http://fiddle.jshell.net/54uDQ/

最重要的部分是这个CSS

#navigation a:hover, #navigation a.selected 
{ 

    background: url('http://i51.tinypic.com/2iih9c9.png') no-repeat scroll 0 0 transparent; 
    color: #000000; 
    height: 43px; 
    list-style: none outside none; 
    padding-left: 10px; 
    text-decoration: none; 
    width: 116px; 
    text-align:center 
}

来源

2011-07-29 12:56:47

请您可以保存该项目，并粘贴在这里的链接..因为它没有显示出来 – PD24

@ PD24笑XD我忘了点击保存...更新 –

@Jospeh：它在的jsfiddle但我的网页上，当我点击选项卡它不保留选定的类。我需要它来保持选定的类，以便用户知道他们在哪个页面上。 – PD24

正如其他人说你不要有一个.selected类也是你的JS会将所有li元素来选择被点击一个你可能想将其更改为这个在第二行

$('#navigation li').click(function() { 
    $(this).addClass('selected'); 
});

来源

2011-07-29 12:59:22 Matt

您对'.selected'没有CSS。所以，添加样式来将按钮变成白色。
你的jQuery不正确。在点击功能中，定位'this'是因为它定位了您单击的特定元素。
```
$('#navigation li').click(function(event) { 
    $(this).addClass('selected'); 
}); 
```

来源

2011-07-29 13:01:10

li菜单需要的类别为“selected”

回答

相关问题