Как сделать специальный ярлык Li активным при нажатии на тег привязки внутри этого тега li?

Я хочу сделать свой тег Li активным, если щелкнуть конкретный тег привязки внутри тега li.Как сделать специальный ярлык Li активным при нажатии на тег привязки внутри этого тега li?

Это мой код:

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

Теперь я хочу, чтобы применить это парение класса CSS на Li теге:

function Display1() 
    { 
     //active ABC 
    } 

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

источник

2015-10-12 Learning-Overthinker-Confused

Try '$ ('уль') на ('нажмите', 'A', функция() { $() removeClass ('активный ').' Активно'.;. $ (это) .closest ('a'). addClass ('active'); return false; }); 'Check [Demo] (https://jsfiddle.net/3tr0o0fz/) – Tushar

@Tushar: Извините, но я не могу измените мою функцию. –

Затем повторите код. 'function Display1 (e) { $ ('. active'). removeClass ('active'); $ (e) .closest ('a'). AddClass ('active'); return false; } Функция Display2 (e) { $ ('. Active'). RemoveClass ('active'); $ (e) .closest ('a'). AddClass ('active'); return false; } 'Check [Demo] (https://jsfiddle.net/tusharj/3tr0o0fz/1/) – Tushar

Добавить click event handler ваши anchor вместо написания инлайн функции, как показано ниже:

$('.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.com/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.com/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>

Пропустите контроль перешел на ваш function и доступ к нему в функции соответственно

источник

2015-10-12 06:41:07

Извините, но я не могу изменить свою функцию –

@Learning Обновленный ответ .. проверьте и дайте мне знать .. –

В любое время. Счастливое кодирование .. :) –

Для того, чтобы конкретный <li> тег активным или неактивным см это ans wer на stackoverflow.

Answer

источник

2017-06-04 12:46:19

Как сделать специальный ярлык Li активным при нажатии на тег привязки внутри этого тега li?

ответ

Смежные вопросы