CSS标签菜单从这个图像保持圆角时关闭标签

Question

我使用jQuery此选项卡菜单，所有的工作，但是我想保持标签标题圆角当内容DIV被关闭，但是当其他选项卡关闭选项卡标题仍然留有左下和右侧直线边缘：

正如您所看到的，封闭的选项卡在底部仍有明显的边缘。有没有一种方法是CSS，我可以设置圆角来关闭标签时返回？

这里是我当前的代码：

$(document).ready(function() 
 
{ 
 

 
    $("#myaccountSettings").accordion(
 
    { 
 
    heightStyle: "content" 
 
    }); 
 

 
});

#myaccountSettings h3 
 
{ 
 
    color: #a2a2a2; 
 
    background-color: #222222; 
 
    margin: 0; 
 
    margin-left: 3px; 
 
    margin-right: 3px; 
 
    padding: 8px; 
 
    border-radius: 4px 4px 0 0; 
 
    outline: none; 
 
} 
 

 
#myaccountSettings h3:hover 
 
{ 
 
    cursor: pointer; 
 
    color: #C33917; 
 
} 
 

 
#myaccountSettings h3:not(:first-child) 
 
{ 
 
    margin-top: 10px; 
 
} 
 

 
.accountTabContentWrapper 
 
{ 
 
    margin: 0; 
 
    margin-left: 3px; 
 
    margin-right: 3px; 
 
    padding: 8px; 
 
    background-color: #676464; 
 
    border-radius: 0 0 4px 4px; 
 
    color: #d6cbc9; 
 
} 
 

 
.accountTabContentWrapper h1 
 
{ 
 
    margin-top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div id="myaccountSettings"> 
 

 
    <h3>General</h3> 
 
    <div class="accountTabContentWrapper"> 
 

 
    <h1>Hello, @username</h1> 
 

 
    
 

 
    </div> 
 

 
    <h3>Email & Password</h3> 
 
    <div class="accountTabContentWrapper"> 
 

 
    </div> 
 

 
    <h3>Delete My Account</h3> 
 
    <div class="accountTabContentWrapper"> 
 

 
    </div> 
 

 
    <!--<h3>Section 3</h3> 
 
    <div class="accountTabContentWrapper"> 
 

 
    </div>--> 
 

 
</div>

Answer 1

$(document).ready(function() { 
 

 
    $("#myaccountSettings").accordion({ 
 
    heightStyle: "content" 
 
    }); 
 
    $(".headers").click(function() { 
 
    current_head = this; 
 
    //$(current_head).css("border-radius","0px"); 
 
    $(current_head).css("border-top-left-radius", "5px"); 
 
    $(current_head).css("border-top-right-radius", "5px"); 
 
    $(current_head).css("border-bottom-right-radius", "0px"); 
 
    $(current_head).css("border-bottom-left-radius", "0px"); 
 
    //$(current_head).css("border-top-right-radius","0px"); 
 
    $(".headers").each(function() { 
 
     if (!$(this).hasClass("ui-state-active") && this != current_head) { 
 
     $(this).css("border-radius", "10px"); 
 
     console.log(this.innerHTML) 
 
     } 
 
    }) 
 

 
    }) 
 
    //trigger a click on first header when window onload to initiate the styling 
 
$(".headers")[0].click() 
 
});

#myaccountSettings h3 { 
 
    color: #a2a2a2; 
 
    background-color: #222222; 
 
    margin: 0; 
 
    margin-left: 3px; 
 
    margin-right: 3px; 
 
    padding: 8px; 
 
    border-radius: 4px 4px 0 0; 
 
    outline: none; 
 
} 
 

 
#myaccountSettings h3:hover { 
 
    cursor: pointer; 
 
    color: #C33917; 
 
} 
 

 
#myaccountSettings h3:not(:first-child) { 
 
    margin-top: 10px; 
 
} 
 

 
.accountTabContentWrapper { 
 
    margin: 0; 
 
    margin-left: 3px; 
 
    margin-right: 3px; 
 
    padding: 8px; 
 
    background-color: #676464; 
 
    border-radius: 0 0 4px 4px; 
 
    color: #d6cbc9; 
 
} 
 

 
.accountTabContentWrapper h1 { 
 
    margin-top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div id="myaccountSettings"> 
 

 
    <h3 class="headers">General</h3> 
 
    <div class="accountTabContentWrapper"> 
 

 
    <h1>Hello, @username</h1> 
 

 

 

 
    </div> 
 

 
    <h3 class="headers">Email & Password</h3> 
 
    <div class="accountTabContentWrapper"> 
 

 
    </div> 
 

 
    <h3 class="headers">Delete My Account</h3> 
 
    <div class="accountTabContentWrapper"> 
 

 
    </div> 
 

 
    <!--<h3>Section 3</h3> 
 
    <div class="accountTabContentWrapper"> 
 

 
    </div>--> 
 

 
</div>