We Keep Coding

PHP : How to add active class in Category Tab after Category-> post URL open?

Good day!!!
I have recently created (cms) a PHP blog site and I'm stuck in Active Class, whenever I click on the menu(category) all links are actively working fine but whenever I click on a blog post the active class is removed.... so I want to set the blog post active with respective category (menu).
Active Class - http://example.com/category/
Active Class removed - http://example.com/category/title-of-the-article/
i wanted to Add active class in both url.... if i open the category page than category is activate or highligh and if i open any blog post than the respective category also active.
After I click on any blog post (Article) the active class is removed as you can see below the picture...
Here is my code [below]
<ul id="nav-main">
<li> Home</li>
<li><a href="/technology/"> Technology</li>
<li> Business</li>
<li> Entertainment </li>
</ul>
ul#nav-main li a.active {
border-bottom: 4px solid #4db2ec;
color: black;
font-weight: bold;
}
<script type="text/javascript">
jQuery(document).ready(function($){
var path = window.location.href;
$('#nav-main li a').each(function() {
if (this.href === path) {
$(this).addClass('active');
}
});
});
</script>

How to highlight selected <li> item only?

I am trying to learn web designing and when trying to add class into it through java script ran into trouble.
html code:
<ul>
<li onclick="switchChannel(channel1)>
#Channel1
</li>
<li onclick="switchChannel(channel2) class="selected">
#Channel2
</li>
<li onclick="switchChannel(channel3)>
#Channel3
</li>
css code:
.selected{
color:blue;
border-left:4px solid blue;
}
javascript:script.js
function switchChannel(channelName) {
}
javascript:channel.js
var channel1={
name:"Channel1",
createdOn:new Date("April 1, 2016"),
starred:false
};
var channel2={
name:"Channel1",
createdOn:new Date("April 1, 2016"),
starred:false
};
I want to be able to click a channel1 from the list and apply .selected class to it but when channel2 is clicked remove .selected from channel1 and apply it to channel2 and so on...
If I have messed up anything else in the code please feel free to comment on it.

There are a lot of answers here but they don't seem to be addressing the actual issue. Here is a quick example using vanilla JavaScript to accomplish what you are asking for.
function switchChannel(el){
// find all the elements in your channel list and loop over them
Array.prototype.slice.call(document.querySelectorAll('ul[data-tag="channelList"] li')).forEach(function(element){
// remove the selected class
element.classList.remove('selected');
});
// add the selected class to the element that was clicked
el.classList.add('selected');
}
.selected{
color:blue;
border-left:4px solid blue;
}
<!-- Add the data-tag attribute to this list so you can find it easily -->
<ul data-tag="channelList">
<li onclick="switchChannel(this)">Channel 1</li>
<li onclick="switchChannel(this)" class="selected">Channel 2</li>
<li onclick="switchChannel(this)">Channel 3</li>
</ul>

You should use getElementsByIdand getElementsbyTagNameto manipulate the DOM:
function selectChannel(channelNumber) {
let listItems = document.getElementById("items").getElementsByTagName("li");
var length = listItems.length;
for (var i = 0; i < length; i++) {
listItems[i].className = i+1 == channelNumber ? "selected" : "";
}
}
.selected {
color: blue;
border-left: 4px solid blue;
}
<ul id="items">
<li onclick="selectChannel(1)">#channel1</li>
<li onclick="selectChannel(2)" class="selected">#channel2</li>
<li onclick="selectChannel(3)">#channel3</li>
</ul>

This solution uses jQuery but I thought this might help you out. A CodePen showing a version of this in action can be seen here.
jQuery(document).ready(function(){
jQuery('li').click(function(event){
//remove all pre-existing active classes
jQuery('.selected').removeClass('selected');
//add the active class to the link we clicked
jQuery(this).addClass('selected');
event.preventDefault();
});
});

I solved it. And I thank you every for your help.
$('li').removeClass('selected');
$('li:contains(' + channelName.name + ')').addClass('selected');

Change color of child elements with the onclick event of parent element

I have a 3 <a> tags with each having class categoryItem wrapped inside of their respective parents with each having class categoryLists.
What I want is to have a tag of color red when li is clicked. For eg: If first li is clicked then it should only color the first a tag instead of coloring all of the a tags.
I tried using for loop but it doesn't seem to work as it colors the whole elements having a tags.
function changeColor() {
let catItem = document.getElementsByClassName('categoryItem');
for(let i = 0; i < catItem.length; i++) {
catItem[i].style.setProperty('color', 'red', 'important');
}
}
.categoryItem {
text-decoration: none;
color: green;
}
<li class="categoryList" onclick="changeColor()">First
First Link
</li>
<li class="categoryList" onclick="changeColor()">Second
Second Link
</li>
<li class="categoryList" onclick="changeColor()">Third
Third Link
</li>

Try this. No need for ids:
function changeColor(el) {
el.querySelector('a.categoryItem').style.setProperty('color', 'red', 'important');
}
.categoryItem {
text-decoration: none;
color: green;
}
<ul>
<li class="categoryList" onclick="changeColor(this)">First
First Link
</li>
<li class="categoryList" onclick="changeColor(this)">Second
Second Link
</li>
<li class="categoryList" onclick="changeColor(this)">Third
Third Link
</li>
</ul>

Pass this to your inline js function call that way your function will have a reference to the element that was clicked.
onclick="changeColor(this)"
Then use querySelector() or similar DOM method to get the child anchor tag of that element.
var item = listElement.querySelector('a.categoryItem');
And from there do the necessary manipulation, note using css classes instead of direct style manipulation.
item.classList.remove('active')
Demo
function changeColor(listElement) {
//clear the active class from current active
var active = listElement.parentElement.querySelector('a.categoryItem.active');
if(active){
active.classList.remove('active');
}
//set the class of the newly clicked element.
var item = listElement.querySelector('a.categoryItem');
if (item) {
item.classList.add('active');
}
}
.categoryItem {
text-decoration: none;
color: green;
}
.categoryItem.active {
color: red;
}
<ul>
<li class="categoryList" onclick="changeColor(this)">First
First Link
</li>
<li class="categoryList" onclick="changeColor(this)">Second
Second Link
</li>
<li class="categoryList" onclick="changeColor(this)">Third
Third Link
</li>
</ul>

CSS to set the background color of dropdownlist on mouse hover

In my MVC Razor layout view I am trying to set the background color of my dropdown list on mouse hover:
The list looks like this:
<li class="dropdown">
Partner <b class="caret"></b>
<ul class="dropdown-menu" style="background-color:#080808">
<li class="marv-main-li">#Html.ActionLink("Test1", "Action1", "Partner")</li>
<li class="marv-main-li">#Html.ActionLink("Test2","Action2","Partner")</li>
<li class="marv-main-li">#Html.ActionLink("Test3","Action3","Partner")</li>
<li class="marv-main-li">#Html.ActionLink("Test4","Action4","Partner")</li>
</ul>
</li>}
I tried this css which didnt work:
.dropdown .dropdown-menu .li a:hover {
background-color: #06fa12;
}
How can I change the background color of the text in the dropdown list on mouse hover event?
I am using Twitter bootsrtap 3

Since <li> is not a class, you should remove the dot before the li in your stylesheet.
Something like this
.dropdown .dropdown-menu li a:hover {
background-color: #06fa12;
}

It is impossible to change a parent element by hovering on a child element. Here is a javascript solution with jQuery.
http://jsbin.com/uWupAtE/1/
$(function() {
var ul = $('.Parent'),
li = $('.Child');
li.mouseover(function() {
ul.addClass('hovered');
});
li.mouseout(function() {
ul.removeClass('hovered');
});
});

Changing the background colour with mouseover and mouseout

I am messing around with this scroll menu and I want each li to change to different colours instead of the same one.
var colorOver = '#31b8da';
var colorOut = '#1f1f1f';
But this changes the colour of all of them.
The html looks like this:
<div id="sidebar">
<ul id="menu">
<li id="first">blog <span> / 2012</span></li>
<li id="second">me <span> / 2012</span></li>
<li id="third">etc <span> / 2012</span></li>
<li id="fourth">etc <span> / 2012</span></li>
</ul>
</div>
I assume you just tell it an id ...
Hopefully I've given enough info.
Thanks for any help.
link to the demo and download

you could modify your css to set the colorOver and colorOut classes for each li like:
.first.colorOver { background-color: #31b8da; }
.first.colorOut { background-color: #1f1f1f; }
and use Francois Wahl's toggleClass option:
$("#sidebar ul#menu li").on("hover", function(){
$(this).toggleClass("colorOver", "colorOut");
});
then you can set colors for each li easily.