I want to make my Li tag active when particular anchor tag inside li tag is clicked.

This is my Code:

<ul class="list-unstyled detail-sidemenu mrb15">
    <li>
        <a onclick="Display1()" href="#"><span class="glyphicon glyphicon-link"></span> ABC</a>
    </li>
    <li>
        <a href="#" onclick="Display2()"><span class="glyphicon glyphicon-link"></span>PQR</a>
    </li>
</ul>

.detail-sidemenu li a:hover {
    background-color: #ed1b23;
    color: #ffffff;
}

Now i want to apply this hover class css on Li tag:

 function Display1()
    {
        //active ABC
    }

 function Display2()
    {
         //Active PQR and remove active from ABC
    }

I want to make my Li tag active when particular anchor tag inside li tag is clicked.

This is my Code:

<ul class="list-unstyled detail-sidemenu mrb15">
    <li>
        <a onclick="Display1()" href="#"><span class="glyphicon glyphicon-link"></span> ABC</a>
    </li>
    <li>
        <a href="#" onclick="Display2()"><span class="glyphicon glyphicon-link"></span>PQR</a>
    </li>
</ul>

.detail-sidemenu li a:hover {
    background-color: #ed1b23;
    color: #ffffff;
}

Now i want to apply this hover class css on Li tag:

 function Display1()
    {
        //active ABC
    }

 function Display2()
    {
         //Active PQR and remove active from ABC
    }

• javascript
• jquery
• html
• css
• twitter-bootstrap

• 1 Try $('ul').on('click', 'a', function () { $('.active').removeClass('active'); $(this).closest('a').addClass('active'); return false; }); Check Demo – Tushar Commented Oct 12, 2015 at 6:40
• @Tushar:Sorry but i cant change my function. – I Love Stackoverflow Commented Oct 12, 2015 at 6:44
• 3 Then repeat the code. function Display1(e) { $('.active').removeClass('active'); $(e).closest('a').addClass('active'); return false; } function Display2(e) { $('.active').removeClass('active'); $(e).closest('a').addClass('active'); return false; } Check Demo – Tushar Commented Oct 12, 2015 at 6:46

2 Answers 2

Add an click event handler to your anchor instead of writing inline function as below:

$('.ach').on('click', function() {
  $('li').removeClass('active');
  $(this).closest('li').addClass('active');
});

.detail-sidemenu li a:hover {
  background-color: #ed1b23;
  color: #ffffff;
}
.active {
  color: red;
  background-color: black;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled detail-sidemenu mrb15">
  <li><a href="#" class="ach"><span class="glyphicon glyphicon-link"></span> ABC</a>
  </li>
  <li><a href="#" class="ach"><span class="glyphicon glyphicon-link"></span>PQR</a>
  </li>
</ul>

Update

function Display1(ctrl) {
  $('li').removeClass('active');
  $(ctrl).closest('li').addClass('active')
}

function Display2(ctrl) {
  $('li').removeClass('active');
  $(ctrl).closest('li').addClass('active')
}

.detail-sidemenu li a:hover {
  background-color: #ed1b23;
  color: #ffffff;
}
.active {
  color: red;
  background-color: black;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled detail-sidemenu mrb15">
  <li><a href="#" onclick="Display1(this)"><span class="glyphicon glyphicon-link"></span> ABC</a>
  </li>
  <li><a href="#" onclick="Display2(this)"><span class="glyphicon glyphicon-link"></span>PQR</a>
  </li>
</ul>

Pass the control clicked to your function and access it in function accordingly

To make particular <li> tag active or inactive refer this answer on stackoverflow.

Answer