CODEWITHSUNDEEP
javascripthtmlcss
Aayam Oza
Aayam Oza

Reputation: 56

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.

Upvotes: 0

Views: 15645

Answers (4)

Aayam Oza
Aayam Oza

Reputation: 56

I solved it. And I thank you every for your help.

$('li').removeClass('selected');
$('li:contains(' + channelName.name + ')').addClass('selected');

Upvotes: 0

Adam H
Adam H

Reputation: 1818

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>

Upvotes: 5

Kingmatusevich
Kingmatusevich

Reputation: 316

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>

Upvotes: 1

B. Cratty
B. Cratty

Reputation: 1991

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

Upvotes: 0

Related Questions