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： 這是我在做的。 除了我也希望.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，那么它將在除左上角以外的所有邊的.tab-content上將border-radius為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 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;
         }