li菜单需要“选择”类别。 [英] li menu needs class of "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透明; 
 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; 
 
} 
 
 / *从IE5-Mac隐藏\ * / 
 #navigation a，#navigation a span 
 {
 float ：none 
} 
 / *结束隐藏* / 
 
 #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顶部无重复; 
 padding-right：10px 
} 
 
 #navigation ul 
 {
 list-style：none; 
 padding：0; 
 margin：0 
} 
 
 #navigation li 
 {
 float：left; 
 list-style：none outside none; 
 margin：0; 
} 
  

JS

  $（'＃navigation li'）。click（function（）{
 $（'＃navigation li'）。addClass ; 
}）; 
  

任何想法？

解决方案

我在这里看到了几个修改。

首先，当你应用选择的类，你正在申请所有 code> items，这不是真的。

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

因此修改的代码为：

  $（'＃navigation li'）。 （function（）{
 $（'＃navigation li'）。removeClass（'selected'）; 
 $（this）.addClass（'selected'）; 
} 
  

最重要的是，您没有选择 类。我把一个临时选择的类定义如下：

  .selected {
 border：1px solid＃ 
 background-color：#white; 
  

}

示例： JsFiddle

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

  $（'a' this）.addClass（'selected'）; // apply to anchor element also 
  

当你删除类时， p>

因此，您希望在不同的页面上保持按钮状态。 Javascript只有在页面打开时才有效。一旦用户转到新页面，所有javascript将被重置。要克服这个问题，您可以执行以下两项操作之一：

1）如果您使用母版页菜单，请添加 runat = 属性添加到您的列表项，并从代码后面添加所选类到您的子页面的相应列表项（可能是您的母版页中有一个公共函数）

  //主页
 public SetHomeMenu（）
 {
 liHome.Attributes.Add（class选择）; 
} 
 
 //在子页面中
 Master.SetHomeMenu（）; 
  

2）如果你想在javascript中做，你需要阅读你的url，然后添加所选类到相应的 li

  //将这个javascript放在你的头部或甚至底部，就在关闭之前
 // body标签< / 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语句更改为此示例：

if（window.location.href.indexOf（home）> -1）




when the user clicks on a menu tab i want it to remain selected with it a white button.

here is my attempt but its not working. if you click the home button it doesnt remain white.

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;
} 

JS

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

any ideas?

解决方案

I see several modifications here.

Firstly, when you apply selected class, you are applying to all li items, which is not true. you only want to apply the class to clicked list item.

secondly, when you click another list item, you want to remove the selected class.

so the code modified would be:

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

Most importantly, you do not have a selected class. I put a temporary selected class definition like so:

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

}

You can see a working example here: on JsFiddle

additionally, your a element has a gray background. so you might want to apply selected white background class to your a element also.. something like:

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

and when you remove the class, follow the same deal.

So you want to persist the button states across different Pages. Javascript is only valid as long as the page is open. As soon as the user goes to the new page, all javascript will be reset. To overcome this you can do one of these two things:

1) If you are using a master page for menu, add runat="server" attribute to your list items, and from code behind, add selected class to appropriate list item from your child page (may be you could have a public function in your Master page)

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

    //in Child page
    Master.SetHomeMenu(); 

2) If you want to do it in javascript, you need to read your url, parse it, then add selected class to appropriate 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");
        } 

    });

But for this to work, you need to add id attributes to your list items like so:

<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>

For use the last solution you need to change the if statement to this example:

if(window.location.href.indexOf("home") > -1)

这篇关于li菜单需要“选择”类别。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！