Question

我猜这真的很简单，但它让我疯了！这是我下面的jquery代码，这是我的Fiddle

$("#Headerhome").addClass('menuSelected').siblings().removeClass('menuSelected');
            $('#Headerhome').children('#Site-icon-1').addClass('SiteIconHover').siblings().removeClass('SiteIconHover');

           $("#HeaderSites").on('click', function () {

            $(this).addClass('menuSelected').siblings().removeClass('menuSelected');
            $(this).children('#Site-icon-2').addClass('SiteIconHover2').siblings().removeClass('SiteIconHover2');

        });


$("#HeaderApps").on('click', function () {

            $(this).addClass('menuSelected').siblings().removeClass('menuSelected');
            $(this).children('#Site-icon-3').addClass('SiteIconHover3').siblings().removeClass('SiteIconHover3');

        });

Answer 1

问题是你正试图找到没有兄弟姐妹的兄弟姐妹。我已经改变了一些CSS和JS。这应该做你想要的。

JS：

 $("#Headerhome").addClass('menuSelected').siblings().removeClass('menuSelected');
 $('#Headerhome').children('#Site-icon-1').addClass('SiteIconHover');

 $("#Headerhome").on('click', function () {

     $(this).addClass('menuSelected').siblings().removeClass('menuSelected');
     $('div').removeClass('SiteIconHover');
     $(this).children('#Site-icon-1').addClass('SiteIconHover');
 });

 $("#HeaderSites").on('click', function () {

     $(this).addClass('menuSelected').siblings().removeClass('menuSelected');
     $('div').removeClass('SiteIconHover');
     $(this).children('#Site-icon-2').addClass('SiteIconHover');
 });


 $("#HeaderApps").on('click', function () {

     $(this).addClass('menuSelected').siblings().removeClass('menuSelected');
     $('div').removeClass('SiteIconHover');
     $(this).children('#Site-icon-3').addClass('SiteIconHover');
 });

CSS：已更新

#Site-icon-1 {

    background-color:#000;
    width:25px;
    height:25px;
    float:left;
    margin-right:15px;
    margin-top:12px;
    margin-left:5px;
}

#Site-icon-1.SiteIconHover {
    background-color:#00a9ff;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;}


#Site-icon-2 {
    background-color:#000;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;
}

#Site-icon-2.SiteIconHover {
    background-color:green;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;}


#Site-icon-3 {
    background-color:#000;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;
}

#Site-icon-3.SiteIconHover {
    background-color:red;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;}


#Headerhome, #HeaderSites, #HeaderApps {

background: #254661;
font-weight: normal;
color: #eeeeee;
box-sizing: border-box;
outline: 0;
line-height:50px;
text-decoration: none;
font-size: 100%;
list-style: none;
width:240px;
height:50px;
display: block;
cursor: pointer;
margin-top: 2px;
margin-left:-20px;
margin-right:0px;
padding-left:20px;
font-family:'Segoe UI';

}

#HeaderSites.menuSelected {
    border-left: 3px solid #26b3f7;
background: #18374f;
}

#Headerhome.menuSelected {
    border-left: 3px solid #26b3f7;
background: #18374f;
}

#HeaderApps.menuSelected {
    border-left: 3px solid #26b3f7;
background: #18374f;
}

DEMO： JSFiddle 已更新

Answer 2

我改进了你的代码。您可以编写更少的代码。

看看下面的内容：

JS：

$(document).ready(function(){
    $('.item').on('click', function(){
        $('.item').removeClass('menuSelected');
        $('.item').children('div').removeClass('SiteIconHover');

        $(this).addClass('menuSelected');
        $(this).children('div').addClass('SiteIconHover');
    });
});

此外，我已更新您的代码，以便您可以查看样式中的更改，因为您可以使用lees css代码。

https://jsfiddle.net/gon250/xwg0Lv9d/6/

我希望它有所帮助。

Answer 3

你的代码有很多很多问题，你需要改进CSS，看看小提琴，我试着改进你的代码，希望它有所帮助

JS Fiddle

我将你的js改为以下

function selectMenu(toSelect) {
    toSelect.addClass('menuSelected').siblings().removeClass('menuSelected');
    toSelect.children().addClass('SiteIconHover');
    toSelect.siblings().children().removeClass('SiteIconHover');
}

selectMenu($("#Headerhome"));

$("#SideNav").on('click', function(event) {
    if(event.target.id !== 'SideNav')
        selectMenu($(event.target));
    event.stopPropagation();
});

Answer 4

我已在下面更新了您的代码：

public class MyClass : PageSearchResultItem
{
    [IndexField("has_date")]
    public bool HasDate { get; set; }
}

var myQuery = _searchContext.GetQueryable<MyClass>.Where(item => item.HasDate);

您还可以在此处查看小提琴链接：https://jsfiddle.net/xwg0Lv9d/7/

Answer 5

尝试一些这样的选择配偶，所有这些选择或其他工作可能它们可以适合你想要的东西

$("#item").removeClass();
$("#item").removeAttr('class');
$("#item").attr('class', '');

为什么removeClass不起作用？

5 个答案: