Confused with jQuery?

Question

JavaScript

https://codepen.io/anon/pen/KvepOw

The situation is as follows, ideally everything should work as follows: when you click on .nav, all content opens, when you click on tabs, only tabs are switched (content is not collapsed), the active class is given item and nav.

I can’t change it in any way so that the click is on nav and at the same time the active class is given for the item that we selected and the nav on which we clicked, respectively, if you poke on the second nav, the last item collapses and the active classes are removed.

Help with advice or correct the code on it, too, I'll understand ...

Thanks in advance.

Answer 1

If you want to deploy an application to vue, then it's better to do it through the official CLI.

npm i @vue/cli -g 
vue create my-app
cd my-app
npm run serve

Answer 2

The same problem arose yesterday: it turned out to be a bug in the latest version of the node https://github.com/nodejs/node/issues/27379, rolled back - everything worked.

Answer 3

css

.item {
  cursor: pointer;
}
.item.active {
  background-color: yellow;
}
.item.active .content{
  display: inline-block;
}
.item .content {
  display: none;
}
.item .nav.active {
  background-color: blue;
  display: inline-block;
}
.item .content .tabs .tab {
  display: inline-block;
}
.item .content .for-tabs .cont:first-child {
  display: block;
}
.item .content .for-tabs .cont {
  display: none;
}

js

$('.item').click(function() {
    $('.item').not($(this)).removeClass('active');
 $(this).toggleClass('active');
  });

$(".tab").click(function(e) {
   var ind = $(this).index();
    $(".tab").removeClass("active");
    $(".cont").hide();
            $(this).addClass("active").closest(".content").find(".cont").eq(ind).show();
  e.stopPropagation();
});

It seems to be! I'm on codepen, I don't know how to save it correctly ... so it's more reliable here.
If the little things, then finish it there ...

I took your example, completely rewrote JS and slightly styles. All clear?
Result

Answer 4

I took your example, completely rewrote JS and slightly styles. All clear?
Result