Question

我正在与我的网站合作，我正在寻找一种方法，当我的div#content1为#nav-home-tab时，可以使用jQuery显示或添加元素aria-selected=true并隐藏或删除元素，如果aria-selected=false

这是我目前的尝试

/*
This code below is Bootstrap Nav tabs that will show div#content1/2 if clicked(aria-selected=true)
*/
<nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
    </div>
</nav>
<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
       <div id="content1">
            //some content
       </div>
    </div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
      <div id="content2">
            //some content
      </div>
    </div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Answer 1

您可以尝试对Jquery Ready函数进行简单检查，

$(document).ready(function(){
    if($('a#nav-home-tab').attr('aria-selected') == "true") {
        $('div#content1').show();
    } else {
        $('div#content1').hide();
    }  
});

您还可以在此处看到JSFIDDLE

Answer 2

我要做的一个小技巧是附加带有onclick属性的ID为“ nav-home-tab”的元素就像这样

<a onclick="toggleThatDiv()" class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>

然后我将检查ID为“ content1”的元素上的属性“ display”

function toggleThatDiv()
{
    if ( $("#content1").is(':visible') )
        $("#content1").hide();
    else
        $("#content1").show();
}

希望这可以解决您的问题。

jQuery根据属性更改隐藏或删除元素

2 个答案: