在jQuery中单击选项卡后，是否禁用点击？

Question

I am having this problem. In my code when I repeatedly click on the tab: mod-2 or mod-3, the border will continue to expand. How to stop when the tab is clicked?

Problem 2: How do I check if code div class="l-item" already exists in html? If it already exists, will the .wrapInner in js stop running?:

$('.vd-list li').wrapInner('<div class="l-item"></div>');

Demo: http://jsfiddle.net/b9tcvjxg/

 $('.mod-1').on('click', function() { $('.display-tab .on').removeClass('on'); $(this).addClass('on'); $('.vd-list').removeClass('mod-2').removeClass('mod-3').addClass('mod-1'); $('.vd-list .l-item').contents().unwrap(); $('.vd-list .v-date, .vd-list .v-info-i:last-child, .vd-list .v-desc').show(); }); $('.mod-2').on('click', function() { $('.display-tab .on').removeClass('on'); $(this).addClass('on'); $('.vd-list').removeClass('mod-1').removeClass('mod-3').addClass('mod-2'); $('.vd-list li').wrapInner('<div class="l-item"></div>'); $('.vd-list .v-date, .vd-list .v-info-i:last-child').hide(); $('.vd-list .v-desc').show(); return false; }); $('.mod-3').on('click', function() { $('.display-tab .on').removeClass('on'); $(this).addClass('on'); $('.vd-list').removeClass('mod-1').removeClass('mod-2').addClass('mod-3'); $('.vd-list li').wrapInner('<div class="l-item"></div>'); $('.vd-list .v-date, .vd-list .v-info-i:last-child, .vd-list .v-desc').hide(); }); 

 .tab-list { display: inline-block; vertical-align: middle; } .tab-list li { float: left; height: 48px; line-height: 48px; margin-right: 20px; cursor: pointer; color: #222; text-align: center; font-size: 14px; font-weight: bold; } .mod-2 .l-item, .mod-3 .l-item { border: 3px solid #111; } .mod-1 .r::after { content: "Mod 1"; color: red; font-weight: bold; } .mod-2 .r::after { content: "Mod 2"; color: green; font-weight: bold; } .mod-3 .r::after { content: "Mod 3"; color: blue; font-weight: bold; } ul { list-style: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class="tab-list display-tab"> <li class="mod-1 on">Mod 1</li> <li class="mod-2">Mod 2</li> <li class="mod-3">Mod 3</li> </ul> <ul class="vd-list mod-1"> <li> <div class="l"></div> <div class="r"> <div class="v-desc">desc</div> <div class="v-info"> <span class="v-info-i">1</span> <span class="v-info-i">2</span> <span class="v-info-i">3</span> </div> <div class="v-date">date</div> </div> </li> </ul> 

Answer 1

you could do something like this:

$('.mod-2').on('click', function() {
  $('.display-tab .on').removeClass('on');
  $(this).addClass('on');

  $('.vd-list').removeClass('mod-1').removeClass('mod-3').addClass('mod-2');

  var alrdyExists = $(".vd-list").find(".l-item").length > 0;
    if(!alrdyExists) {
       $('.vd-list li').wrapInner('<div class="l-item"></div>');
    }

  $('.vd-list .v-date, .vd-list .v-info-i:last-child').hide();
  $('.vd-list .v-desc').show();
    return false;
});

This will only border mod-2 content once as it checks whether mod-2 already contains l-item by using find and checking the length of the result.

You can apply the same method to the mod-3 on click.

Here is a working fiddle just in case: http://jsfiddle.net/e3fjqnhb/2/