Question

我的网站中有以下标签内容，其中有边框半径。问题是当选择第一个选项卡时，它附近的边界半径仍然存在并且不会使它看起来很好。 enter image description here 我写了一段jquery来修复它，但当它删除半径时，不再选中标签时将其恢复。

def show_difference(image_a, image_b):
    norm = plt.Normalize(vmin=np.min([image_a.min(),image_b.min()]),
                         vmax=np.max([image_a.max(),image_b.max()])  )

    plt.subplot(1,2,1)
    plt.imshow(image_a, interpolation='none', norm=norm)

    plt.subplot(1,2,2)
    plt.imshow(image_b, interpolation='none', norm=norm)

    plt.show()

任何想法都可以吗？

ps：this正是我正在努力的。除了我还希望.tab-content的边框半径为5pixels。

Answer 1

你只需要创建一个类

.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 2

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

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

＆＃13;

$(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");
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

CodePen

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

Jquery - 调整选项卡式内容的border-radius

3 个答案: