Bootstrap 4：僅在導航標籤處於活動狀態時顯示元素

Question

我正在製作需要僅在活動標籤上顯示元素的導航標籤頁。就我而言，它是指向內容的白色箭頭。當你點擊另一個標籤時，我怎樣才能讓它消失？或者，我如何將它移動到該選項卡，以便它指向它的內容呢？

這裏是我的代碼的輪廓：

.arrow-down { 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid white; 
 
    margin-left: 20px; 
 
} 
 
.nav-tabs { 
 
    background-color: black; 
 
} 
 
.tab-content { 
 
    background-color: #ccc 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 

 
<ul class="nav nav-tabs" role="tablist"> 
 
    <li class="nav-item"> 
 
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a> 
 
    <div class="arrow-down"></div> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> 
 
    </li> 
 
</ul> 
 

 
<div class="tab-content"> 
 
    <div class="tab-pane active" id="home" role="tabpanel">...</div> 
 
    <div class="tab-pane" id="profile" role="tabpanel">...</div> 
 
    <div class="tab-pane" id="messages" role="tabpanel">...</div> 
 
    <div class="tab-pane" id="settings" role="tabpanel">...</div> 
 
</div>

Answer 1

添加類顯示的箭頭，然後單擊事件添加到所有菜單，刪除以前的箭頭，添加到當前標籤。

.active-arrow { 
    display: block; 
} 

要居中的箭頭，你可以使用Flexbox的，並添加margin-top每個箭頭向右定位。

.nav-item { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

$('ul a.nav-link').on('click', function(e) { 
 
    $('.arrow-down').removeClass('active-arrow'); 
 
    $(this).next('.arrow-down').addClass('active-arrow'); 
 
})

.arrow-down { 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid white; 
 
    display: none; 
 
    margin-top: 28px; 
 
} 
 

 
.nav-item { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.active-arrow { 
 
    display: block; 
 
} 
 

 
.nav-tabs { 
 
    background-color: black; 
 
} 
 

 
.tab-content { 
 
    background-color: #ccc 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 

 
<ul class="nav nav-tabs" role="tablist"> 
 
    <li class="nav-item"> 
 
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a> 
 
    <div class="arrow-down active-arrow"></div> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> 
 
    <div class="arrow-down"></div> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> 
 
    <div class="arrow-down"></div> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> 
 
    <div class="arrow-down"></div> 
 
    </li> 
 
</ul> 
 

 
<div class="tab-content"> 
 
    <div class="tab-pane active" id="home" role="tabpanel">1</div> 
 
    <div class="tab-pane" id="profile" role="tabpanel">2</div> 
 
    <div class="tab-pane" id="messages" role="tabpanel">3</div> 
 
    <div class="tab-pane" id="settings" role="tabpanel">4</div> 
 
</div>