我猜这真的很简单,但它让我疯了!这是我下面的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');
});
答案 0 :(得分:2)
问题是你正试图找到没有兄弟姐妹的兄弟姐妹。我已经改变了一些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 已更新
答案 1 :(得分:1)
我改进了你的代码。您可以编写更少的代码。
看看下面的内容:
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/
我希望它有所帮助。
答案 2 :(得分:0)
你的代码有很多很多问题,你需要改进CSS,看看小提琴,我试着改进你的代码,希望它有所帮助
我将你的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();
});
答案 3 :(得分:0)
我已在下面更新了您的代码:
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/
答案 4 :(得分:-1)
尝试一些这样的选择配偶,所有这些选择或其他工作可能它们可以适合你想要的东西
$("#item").removeClass();
$("#item").removeAttr('class');
$("#item").attr('class', '');