如何更改伪类属性？

Question

我试图在点击第一个按钮时删除左边框，并在最后一个按钮点击时删除右边框..

[]

使用了一些代码，但没有成功.. 我的最后一次尝试是$（“＃menu-btn-a .active：before”）。css（“display”，“none”）;

如何在点击第一个按钮时将'display：block'更改为'none'，然后在使用jquery单击最后一个按钮时更改为'none'之后？

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

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') {

要：

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/