Jquery - 调整选项卡式内容的边框半径

Question

我的网站中有以下选项卡式内容，其周围有边框半径。问题是当第一个选项卡被选中时，它附近的边框半径仍然存在并且不会使它看起来很好。

我写了一段 jquery 来修复它，但是当它删除半径时，当不再选择选项卡时不会把它带回来。

    if (tab_id=="tab-1"){
        $('.tab-content').css("border-top-right-radius","0");
    }
    if (tab_id!=="tab-1"){
        $('.tab-content').css("border-top-right-radius","5px;");
    }

有什么想法吗？

ps： this 这就是我正在做的事情。除了我还希望 .tab-content 的边框半径为 5 像素。

Answer 1

您正在寻找一个 if 语句来检查所选标签是否是第一个子标签。如果语句返回 true，则它将 border-radius 在除左上角之外的所有边上的 .tab-content 上设置为 5px。如果为 false，则将 border-radius 的所有边设置为 5px。

这个 if/else 语句需要在代码中调用两次。一次在.click() 函数之前，然后在它里面。

$(document).ready(function() {
  if ($(".tab-link.current").is(":first-child")) {
    $(".tab-content").css("border-radius", "0 5px 5px 5px");
  } else {
    $(".tab-content").css("border-radius", "5px");
  }
  $("ul.tabs li").click(function() {
    var tab_id = $(this).attr("data-tab");

    $("ul.tabs li").removeClass("current");
    $(".tab-content").removeClass("current");

    $(this).addClass("current");
    $("#" + tab_id).addClass("current");
    if ($(".tab-link.current").is(":first-child")) {
      $(".tab-content").css("border-radius", "0 5px 5px 5px");
    } else {
      $(".tab-content").css("border-radius", "5px");
    }
  });
});

body {
  margin-top: 100px;
  font-family: 'Trebuchet MS', serif;
  line-height: 1.6;
}
.container {
  width: 800px;
  margin: 0 auto;
}

ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ul.tabs li {
  background: none;
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}

ul.tabs li.current {
  background: #ededed;
  color: #222;
  border-radius: 5px 5px 0 0;
}

.tab-content {
  display: none;
  background: #ededed;
  padding: 15px;
  border-radius: 5px;
}

.tab-content.current {
  display: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">

  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Tab One</li>
    <li class="tab-link" data-tab="tab-2">Tab Two</li>
    <li class="tab-link" data-tab="tab-3">Tab Three</li>
    <li class="tab-link" data-tab="tab-4">Tab Four</li>
  </ul>

  <div id="tab-1" class="tab-content current">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div id="tab-2" class="tab-content">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="tab-3" class="tab-content">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
  <div id="tab-4" class="tab-content">
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

</div>
<!-- container -->

CodePen

Answer 2

你只需要创建一个类

.roundBorder{
  border-top-right-radius:15px;
}

然后在单击选项卡时只需使用addClass()

$('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');

        //add this line to add rounded border on tab click           
        $(this).addClass('roundBorder');

    });

});

Answer 3

你试过这样吗？

        $('ul.nav li a').filter(function () {
            if (this.id == 'tab_1') {
                $(this).parent().addClass('active');
            }
            else
             {$(this).parent().removeClass('active'); }
        });
    });

这里是活动类

 .active{
          border-top-right-radius:10px;
         }