Как изменить свойство псевдо класса?

Question

Я пытаюсь удалить левую границу при первой кнопки щелкнул правой границы, когда последняя кнопка нажата слишком ..

[]

используется код, но не сделал это .. Моя последняя попытка была $ ("# menu-btn-a .active: before"). css ("display", "none");

Как изменить: до 'display: block' to 'none' при нажатии на первую кнопку и: после того, как «none» тоже при нажатии на последние кнопки с помощью jquery?

jQuery(function($) { 
 
\t \t \t 
 
\t // Click on button 
 
\t $("[id^='menu-btn-']").click(function() { 
 
\t \t $("[id^='menu-btn-']").removeClass('active'); 
 
\t \t $(this).addClass('active'); \t 
 
\t \t if ($(this) == 'menu-btn-a') { 
 
\t \t \t $("#menu-btn-a .active:before").css("display", "none"); 
 
\t \t } 
 
\t }); \t 
 
});

body {background-image: linear-gradient(#1f1d1e, #1f1d1e);} 
 
.buttons {white-space: nowrap;min-height: 33px;position: relative;width: 205px;margin: 6px auto;} 
 
.buttons a {width: 50px;height: 33px;position: absolute;top: 0;text-decoration: none;padding-top: 11px;outline-width: 0px;z-index: 990;color: transparent; text-align: center;line-height: 26px;display: block;background-image: linear-gradient(#1f1d1e, #1f1d1e);} 
 
.buttons a:not(.active) {box-shadow: inset 0 1px 1px rgba(130, 58, 11, 0.8), inset 0 -1px 0px rgba(115, 82, 60, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #fd6a06; background-image: linear-gradient(#fffff, #ff000); text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 -1px 0 #ffffff;} 
 
.buttons a:not(.active):hover, 
 
.buttons a:not(.active):focus {transition: color 200ms linear, text-shadow 500ms linear;color: #de610f;text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #de610f;} 
 
.buttons a:not(.active):active {color: #e4e3ce !important} 
 
.buttons a.active, 
 
.buttons a:active {box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px #1f1d1e, 0 2px 1px 0 rgba(143, 100, 71, 0.5), inset 0 0 4px 3px rgba(15, 8, 22, 0.2); background-image: linear-gradient(#964208, #de610f); text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #dc620f;color: #ffffff;} 
 
.buttons a.active:before, 
 
.buttons a:active:before {position: absolute;display: block;content: "";width: 1px;height: 36px;top: 1px;left: -2px;background-image: linear-gradient(rgba(91, 35, 105, 0), #ff7012 41%, #ff7012 59%, rgba(91, 35, 105, 0));box-shadow: -2px 0 6px 0 #ff7012; } 
 
.buttons a.active:after, 
 
.buttons a:active:after {position: absolute;display: block;content: "";width: 1px;height: 36px;top: 1px;right: -2px;background-image: linear-gradient(rgba(91, 35, 105, 0), #ff7012 41%, #ff7012 59%, rgba(91, 35, 105, 0));box-shadow: 2px 0 6px 0 #ff7012;} 
 
.buttons a.active {z-index: 1000} 
 
.buttons a:active {z-index: 999} 
 
.buttons a:last-of-type {border-radius: 0 7px 7px 0;} 
 
.buttons a:first-of-type {border-radius: 7px 0 0 7px;left: 0;} 
 
.buttons a:nth-of-type(2) {left: 51px} 
 
.buttons a:nth-of-type(3) {left: 102px} 
 
.buttons a:nth-of-type(4) {left: 153px} 
 
.buttons a:nth-of-type(5) {left: 204px} 
 
.buttons a:nth-of-type(6) {left: 255px} 
 
.buttons a:nth-of-type(7) {left: 306px} 
 
.buttons a:nth-of-type(8) {left: 357px} 
 
.buttons a i:before {margin-left: 2px;font-size: 18px;} 
 
.buttons a i.icon-bar-chart:before {font-size: 20px;margin-top: 0px;} 
 
.buttons a i.icon-sync:before {font-size: 20px;margin-left: 3px;margin-top: 1px;} 
 
.buttons a i.icon-download:before {font-size: 19px;margin-top: 1px;margin-left: 4px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='buttons'> 
 
     <a id="menu-btn-a" class="active" href="#" title="A">&#x2606;</a> 
 
     <a id="menu-btn-b" class="" href="#" title="B">&#x262F;</a> 
 
     <a id="menu-btn-c" class="" href="#" title="C">&#x267A;</a> 
 
    </div>

Спасибо!

Answer 1

Ваш дисплей CSS никто не правильно, но я думаю, вы должны изменить:

if ($(this) == 'menu-btn-a') { 

To:

if ($(this).attr('id') == ''menu-btn-a') { 

Или вы можете решить эту проблему полностью в CSS (хотя я не уверен, о порядок селектор):

.buttons a:first.active:before { display:none; } 

Один, который, безусловно, является работа:

.buttons a#menu-btn-a.active:before, 
.buttons a#menu-btn-a:active:before { display:none; } 

Answer 2

Вы можете использовать селектор css: not().

CSS:

.buttons a.active:not(.first):before, 
.buttons a:active:not(.first):before { 
    position: absolute; 
    display: block; 
    content: ""; 
    width: 1px; 
    height: 36px; 
    top: 1px; 
    left: -2px; 
    background-image: linear-gradient(rgba(91, 35, 105, 0), #ff7012 41%, #ff7012 59%, rgba(91, 35, 105, 0));box-shadow: -2px 0 6px 0 #ff7012; 
} 
.buttons a.active:not(.last):after, 
.buttons a:active:not(.last):after { 
    position: absolute; 
    display: block; 
    content: ""; 
    width: 1px; 
    height: 36px; 
    top: 1px;right: -2px; 
    background-image: linear-gradient(rgba(91, 35, 105, 0), #ff7012 41%, #ff7012 59%, rgba(91, 35, 105, 0));box-shadow: 2px 0 6px 0 #ff7012; 
} 

HTML

<div class='buttons'> 
    <a id="menu-btn-a" class="first active" href="#" title="A">&#x2606;</a> 
    <a id="menu-btn-b" class="" href="#" title="B">&#x262F;</a> 
    <a id="menu-btn-c" class="last" href="#" title="C">&#x267A;</a> 
</div> 

JS

jQuery(function($) { 
    $("[id^='menu-btn-']").click(function() { 
     $("[id^='menu-btn-']").removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

DEMO: https://jsfiddle.net/20wbLvfv/1/