僅使用html的引導按鈕組預選按鈕

使用引導我想要一個按鈕組，但預先選擇了一個按鈕。如果我使用下面的html，那麼第一個按鈕會被預先選中，但即使我點擊其他按鈕之一，它仍然保持活動狀態。僅使用html的引導按鈕組預選按鈕

只使用html我怎樣才能定義按鈕組，選擇一個按鈕，當我點擊其他按鈕時，該按鈕將取消選擇。

<div class="btn-group"> 
    <button type="button" class="btn btn-default active">Left</button> 
    <button type="button" class="btn btn-default">Middle</button> 
    <button type="button" class="btn btn-default">Right</button> 
</div>

來源

2014-03-12 whatdoesitallmean

這不是完全可能只用HTML做到這一點 - （如您的標題暗示）。

真的，你可以做沒有JavaScript的唯一的事情是屬性autofocus="autofocus"添加到這樣所需的元素：

<button type="button" class="btn btn-default" autofocus="autofocus">Left</button>

由於屬性意味着，該按鈕會自動集中在支持的瀏覽器。如果點擊另一個按鈕，第一個按鈕的焦點將被刪除。

EXAMPLE HERE

值得一提的是的.btn-default.active的造型是一樣的.btn-default:focus：

.btn-default:focus, .btn-default.active { 
    color: #333; 
    background-color: #ebebeb; 
    border-color: #adadad; 
}

不幸的是，活動還將關注一下其他地方的頁面上過當去除。如果這是一個問題，JavaScript就需要解決這個問題。解決辦法是在所需元素上有active類，然後在單擊任何同級按鈕元素時將其刪除。這種選擇與無線電元素是相互排斥的。

以下是直接從Bootstrap JS documentation獲取的示例。值得注意的是需要包含Bootstrap JS文件/ jQuery。

EXAMPLE HERE

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary active"> 
    <input type="radio" name="options" id="option1"> Option 1 
    </label> 
    <label class="btn btn-primary"> 
    <input type="radio" name="options" id="option2"> Option 2 
    </label> 
    <label class="btn btn-primary"> 
    <input type="radio" name="options" id="option3"> Option 3 
    </label> 
</div>

來源

2014-03-12 20:26:40

僅使用html的引導按鈕組預選按鈕

回答

相關問題