jquery - CSS 选项卡菜单在选项卡关闭时保持圆 Angular

Question

我有这个使用 jQuery 的选项卡菜单，它一切正常，但是当内容 div 关闭时，我想保留选项卡标题上的圆 Angular ，但是当其他选项卡关闭时，从这张图片来看，选项卡标题仍然存在具有左下角和右下角的直边:

如您所见，关闭的选项卡底部仍然有直边。有没有一种方法可以让我在 CSS 中设置圆 Angular 以在选项卡关闭时返回？

这是我当前的代码:

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