title: How to highlight selected <li> item only?
body: <p>I am trying to learn web designing and when trying to add class into it through java script ran into trouble.</p>
  
  <p>html code:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li onclick="switchChannel(channel1)&gt;
          #Channel1
      &lt;/li&gt;
      &lt;li onclick="switchChannel(channel2) class="selected"&gt;
          #Channel2
      &lt;/li&gt;
      &lt;li onclick="switchChannel(channel3)&gt;
          #Channel3
      &lt;/li&gt;
  </code></pre>
  
  <p>css code:</p>
  
  <pre><code>.selected{
      color:blue;
      border-left:4px solid blue;
  }
  </code></pre>
  
  <p>javascript:script.js</p>
  
  <pre><code>function switchChannel(channelName) {
      }
  </code></pre>
  
  <p>javascript:channel.js</p>
  
  <pre><code>    var channel1={
          name:"Channel1",
          createdOn:new Date("April 1, 2016"),
          starred:false
  };
  
       var channel2={
              name:"Channel1",
              createdOn:new Date("April 1, 2016"),
              starred:false
      };
  </code></pre>
  
  <p>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...</p>
  
  <p>If I have messed up anything else in the code please feel free to comment on it.</p>