[英]How to dynamically add a class to li item and change its background color using javascript and css
Here I have a list, what I want to do is I need to change the list ( li ) background color to different one after click on a specific list item. 在这里,我有一个列表,我要做的是在单击特定列表项后,需要将列表( li )背景颜色更改为其他颜色。 the thing is once it click on the link page will be redirected and refresh.
事情是一旦它在链接页面上单击将被重定向和刷新。 please can me suggest a solution for to get this done?
请问我可以提出解决方案以完成此工作吗?
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home"><a href="main/home">Home</a></li>
<li id="menu-profile"><a href="main/profile">My Profile</a></li>
<li id="menu-dashboard"><a href="main/db">My Dashboard</a></li>
<li id="menu-search"><a href="main/search">Search</a></li>
</ul>
</div>
what i did for this : 我为此做了什么:
Java Script : Java脚本:
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
)
//Add the clicked button class
$(this).addClass('active');
}
//Attach events to menu
$(document).ready(
function()
{
$("#main-menu li").click(make_button_active);
}
)
CSS : CSS:
#main-menu-list li.active {
background: #0040FF;
}
It's a little difficult to tell exactly what you want to do, but here's some quick and dirty (and untested) code: 确切说出您想要做什么有点困难,但是这里有一些快速而又肮脏(未经测试)的代码:
/// when we click on an `a` tag inside the `#main-menu-list`...
$('#main-menu-list').on('click', 'a', function(e) {
// stop the link from firing
e.preventDefault();
e.stopPropagation();
// change the list item's background to green
$(this).closest('li').addClass('myClassName').css('background-color', 'green');
// do anything else, e.g. load in pages via ajax...
});
You could use CSS to apply the green background color, instead of jQuery: 您可以使用CSS来应用绿色背景颜色,而不是jQuery:
.myClassName { background-color: green; }
This will stop the page from navigating, and I don't know if that's your intention. 这将阻止页面导航,我不知道这是否是您的意图。 If you want to check the currently-loaded page against the menu to find the current item, you could do this (on page load) instead:
如果要对照菜单检查当前加载的页面以查找当前项目,则可以这样做(在页面加载时):
var currentPage = window.location.pathname;
$('#main-menu-list').find('a[href^="' + currentPage + '"]').closest('li').addClass('active');
EDIT: 编辑:
Your amended Javascript code can be simplified to the following: 您修改后的Javascript代码可以简化为以下内容:
$('#main-menu li').on('click', 'a', function (e) {
e.preventDefault();
e.stopPropagation();
// only do the following if the clicked link isn't already active
if(!$(this).closest('li').hasClass('active')) {
$(this).closest('ul').find('.active').removeClass('active');
$(this).closest('li').addClass('active');
// load in your content via ajax, etc.
}
});
For each page you can add a class to the current list item that has "where the user is".. 对于每个页面,您可以将一个类添加到具有“用户所在位置”的当前列表项。
CSS: CSS:
.selectedItem{
background-color: orange;//whatever color your want for the selected tab..
}
Then for each of your pages, 然后,对于您的每个页面,
say you're in Dashboard.html 说你在Dashboard.html
your menu code will look like: 您的菜单代码如下所示:
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home"><a href="main/home">Home</a></li>
<li id="menu-profile"><a href="main/profile">My Profile</a></li>
<li id="menu-dashboard" class="selectedItem"><a href="main/db">My Dashboard</a></li>
<li id="menu-search"><a href="main/search">Search</a></li>
</ul>
</div>
in profile.html: 在profile.html中:
<div id="main-menu">
<ul id="main-menu-list">
<li id="menu-home"><a href="main/home">Home</a></li>
<li id="menu-profile" class="selectedItem"><a href="main/profile">My Profile</a></li>
<li id="menu-dashboard"><a href="main/db">My Dashboard</a></li>
<li id="menu-search"><a href="main/search">Search</a></li>
</ul>
</div>
and so on.. 等等..
You need to change the background color when the document is loaded (ie in document.ready). 加载文档时(例如,在document.ready中),您需要更改背景颜色。
Then you need a mechanism to connect the currently loaded page to one of your list items. 然后,您需要一种将当前加载的页面连接到列表项之一的机制。
$(document).ready(function(){
//get the url from the current location or in some other way that suits your solution
//perhaps use window.location.pathname
var moduleId = "dashboard" // hardcoded to dashboard to make the point :);
$("#menu-"+moduleId).css("background-color", "#ccc");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.