Переопределения по клику Jquery (Из серии изучаем Jquery вмести)

[ArtemPitov]

Доброго время суток !

Помогите разобраться,

Есть скрипт приведенный ниже, который отвечает за перемещения  линии навигации <li class='line'></li>, при .hover()

не могу понять логику процесса, как сделать переопределения позиций при .click()

 

пробовал так:

$(".nav-tabs li > a").hover(
  function(){
    if $(".nav-tabs li > a").click() return;
    ...
  },

  function(){
     if $(".nav-tabs li > a").click() return;
    ...
  }
); 

но все что получил ошибку  :ugeek:

$(function () {
  $('.nav-tabs').append("<li class='line'></li>");
  var $menu = $(".nav-tabs");
  
  $line = $(".line"),
  $active = $menu.find(".active a"),
		
  //position line default
  default_pos = $active.offset().left - $menu.offset().left,
  default_width = $active.outerWidth();
  $line.css({left: default_pos,width: default_width});
	
  $(".nav-tabs li > a").hover(
    function () {
      var self = $(this);                
      var diff = self.offset().left - $menu.offset().left;
      $line.stop().animate({
      width: self.outerWidth(),
      left: diff}, 500);
    }, 
    
    function () {
      $line.stop().animate({
      width: default_width,
      left: default_pos},500);
     });		
});

[chukcha]

Что вы хотите получить?

[ArtemPitov]

Что вы хотите получить?

Это линия навигации под пунктами меню которая движется от активного пункта к hover пункту , при клике она должна остаться на переопределенном классе active активного пункта (это карточка товара описания, характеристики и тд..)