鍍金池/ 問答/HTML/ vue選中后點擊旁邊選中的狀態(tài)就會消失

vue選中后點擊旁邊選中的狀態(tài)就會消失

點中一個路由連接后是選中的狀態(tài) 然后鼠標點擊導航條以外任意的地方 當前選中狀態(tài)的樣式就消失了 路由什么的都沒有變化就是剛才導航欄選中的樣式?jīng)]有了 這是怎么回事？我用的bootstrap的樣式 這是bootstrap的原因還是vue的原因？
圖片描述
圖片描述

<div id="left">
    <router-link class="list-group-item" to="/product">product</router-link>
    <router-link class="list-group-item" to="/work">work</router-link>
    <router-link class="list-group-item" to="/contact">contact</router-link>
</div>
回答
編輯回答
小曖昧

對的 是bootstrap的原因，現(xiàn)在鏈接的高亮是由bootstrap自己控制的。這個是不行的

高亮哪個鏈接需要由我們自己控制，我們需要在頁面中監(jiān)聽路由的變化，然后高亮對應的鏈接按鈕

2017年8月27日 13:07
編輯回答
短嘆

首先，這個不是bug，這個是人家bootstrap就是這樣定的，知道什么叫focus狀態(tài)嗎？就是你點擊了按鈕，在你沒有點別的地方的時候，這個按鈕就是focus狀態(tài)了。人家bootstrap就是定義了list-group-item這個組件的focus狀態(tài)，并沒有定你想要的路由激活的active狀態(tài)，如果你想要這樣的，你可以考慮定義一下vue-router的active-class，當你路由和你的<router-link>的to屬性匹配的時候，就會激活你定義的那個class，可以考錄定義成bootstrap的激活的按鈕樣式，如，

<!-- Standard button -->
<button type="button" class="btn btn-default">（默認樣式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首選項）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危險）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（鏈接）Link</button>

傳送門

2017年5月9日 16:34