按下按鈕css

在我開始之前，我找到了這個主題：Pressed <button> CSS這給我一半的答案，我正在尋找。按下按鈕css

我在鏈接中有一個按鈕，我希望它在按下後保持其風格。此外，當我點擊頁面上的其他位置時，我希望看到它恢復到正常樣式（在按下之前）。

這裏是我的代碼：

jQuery('.btnpublish').click(function(){ 
 
    jQuery(this).toggleClass('active'); 
 
});

.btnpublish{ 
 
background-color: #7f8c8d; 
 
border: 1px solid #7f8c8d; 
 
font-weight: bold; 
 
} 
 

 
.btnpublish:hover{ 
 
background-color: #3498db; 
 
border: 1px solid #3498db; 
 
} 
 

 
.btnpublish:active{ 
 
background-color: #3498db; 
 
border: 1px solid #3498db; 
 
} 
 

 
.btnpublish.active{ 
 
background-color: #3498db; 
 
border: 1px solid #3498db; 
 
}

<ul class="" role="tablist"> 
 
<li class="active listlayer6publish"><a class="btn btn-dark btnpublish" href="#vtab1" role="tab" data-toggle="tab"> Sports</a></li> 
 
<li class="listlayer6publish"><a class="btn btn-dark " href="#vtab2" role="tab" data-toggle="tab"> Santé</a></li> 
 
</ul>

現在，當我按下按鈕「體育」，它保持了積極的風格之前，我再次按下按鈕。唯一的問題是，當我按下頁面上的其他任何地方時，我想改變它。

來源

2015-11-23 user3163600

「*當我點擊別的地方頁面*」，你的意思是在頁面的其他鏈接，或在'ul'，或單擊其它鏈接上的任何地方該頁面即使不是'a'元素？ –

你說你在看作品的答案，你還想要什麼。 – abc123

它更容易使用的隱藏radio輸入，帶標籤。我添加並修改了jQuery，雖然你不需要它的效果。看到這個POST

$(function() { 
 
    $('.btn').on('click', function(event) { 
 
    $(this).addClass('active'); 
 
    $('.btn').not(this).removeClass('active'); 
 
    }); 
 
});

.tablist input[type="radio"] { 
 
    display: none; 
 
} 
 
.tablist label { 
 
    display: inline-block; 
 
    background-color: #ddd; 
 
    color: grey; 
 
    padding: 3px 6px; 
 
    font-family: Arial; 
 
    font-size: 16px; 
 
    border: 1px inset grey; 
 
    border-radius: 6px; 
 
    cursor: pointer; 
 
} 
 
.tablist input[type="radio"]:checked + label { 
 
    background-color: transparent; 
 
    color: blue; 
 
    border: 1px inset blue; 
 
} 
 
fieldset { 
 
    width: -moz-fit-content; 
 
    width: -webkit-fit-content; 
 
    width: -fit-content; 
 
    border-radius: 6px; 
 
} 
 
.btn { 
 
    text-decoration: none; 
 
    /* When you integrate this code, change none to auto */ 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset class="tablist"> 
 
    <input type="radio" id="r1" name="rad" data-toggle="tab" checked> 
 
    <label for="r1" class="tag"> 
 
    <a href="#" class="btn active" data-toggle="tab">Sports</a> 
 
    </label> 
 

 
    <input type="radio" id="r2" name="rad" data-toggle="tab"> 
 
    <label for="r2" class="tag"> 
 
    <a href="#" class="btn" data-toggle="tab">Sante</a> 
 
    </label> 
 

 
    <input type="radio" id="r3" name="rad"> 
 
    <label for="r3" class="tag"> 
 
    <a href="#" class="btn" data-toggle="tab">Claus</a> 
 
    </label> 
 
</fieldset>

來源

2015-11-23 04:50:19 zer00ne

謝謝，我學到了很多東西！:) – user3163600

歡迎您，先生。我很高興它幫助:) – zer00ne

試一下：

jQuery(document).click(function() { 
      jQuery(".listlayer6publish").each(function() { 
       if (jQuery(this).hasClass("active")) 
        jQuery(this).removeClass("active");   
      });

來源

2015-11-23 03:20:16 Phuong

不適用於Safari – user3163600

您可以使用下面的CSS來實現所需的功能

.btnpublish:focus { 
background-color: #3498db; 
border: 1px solid #3498db; 
}

來源

2015-11-23 04:48:31

回答

相關問題