单击时无法从div中删除颜色

Question

我有3div：

单击" A"第一个Div将突出显示，

单击" C"第三div时，

单击" B"第一和第二个DIV将突出显示

但是我想要那个

如果用户再次单击" a"，则第一div的亮点消失

如果用户再次单击" c"，则第三div的亮点消失了

如果用户再次单击" B"，则首先和第二个DIV的亮点消失了

<div class="d-rec">A</div>
<div class="c-rec" >B</div>
<div class="l-rec" >C</div>
 $(document).ready(function() {
    $('.d-rec').click(function(e) {  
    $('.d-rec') .css({'border-top': '2px solid #39cd90','color': '#39cd90','padding-top': '0px'});
    });
     $('.c-rec').click(function(e) {  
    $('.d-rec') .css({'border-top': '2px solid #39cd90','color': '#39cd90','padding-top': '0px'});
    $('.c-rec') .css({'border-top': '2px solid #39cd90','color': '#39cd90','padding-top': '0px'});
    });
      $('.l-rec').click(function(e) {  
    $('.l-rec') .css({'border-top': '2px solid #39cd90','color': '#39cd90','padding-top': '0px'});
    });
});

这是一个完整的代码

任何人都可以告诉如何实现目标

Answer 1

首先：ID应该是唯一的。您有三个具有相同ID的DIV，这并不唯一，因此，我们将您的HTML更改为

：

<div class="rec" id="d-rec">A</div>
<div class="rec" id="c-rec">B</div>
<div class="rec" id="l-rec">C</div>

，使用几行jQuery，您可以切换一个亮点类别：

$(document).ready(function() {
    $('.rec').click(function(e) {
        var $this = jQuery(this);
        $this.toggleClass('highlight');
    });
});

并在亮点类中定义您的CSS：

.highlight {
    border-top: 2px solid #39cd90;
    color: #39cd90;
    padding-top: 0px;
}

Answer 2

这将对您有用：

$(document).ready(function() {
  $('.dash-margin>div').click(function(e) {
    $('.dash-margin>div').css({
      'border-top': '0px solid #39cd90',
      'color': '#6a7c94',
      'padding-top': '2px'
    });
    if ($(this).hasClass('c-rec')) {
      $('.d-rec').css({
        'border-top': '2px solid #39cd90',
        'color': '#39cd90',
        'padding-top': '0px'
      });
    }
    $(this).css({
      'border-top': '2px solid #39cd90',
      'color': '#39cd90',
      'padding-top': '0px'
    });
  });
});

.l-rec {
  background-color: #ffffff;
  font-family: Lato;
  font-size: 11.2px;
  font-weight: 500;
  text-align: center;
  color: #6a7c94;
  padding: 2px;
  width: 100px;
  margin-bottom: 15px;
  height: 34.2px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}
.d-rec {
  background-color: #ffffff;
  font-family: Lato;
  font-size: 11.2px;
  font-weight: 500;
  text-align: center;
  color: #6a7c94;
  padding: 2px;
  width: 100px;
  height: 34.2px;
  margin-bottom: 15px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}
.c-rec {
  background-color: #ffffff;
  font-family: Lato;
  font-size: 11.2px;
  font-weight: 500;
  text-align: center;
  color: #6a7c94;
  padding: 2px;
  width: 100px;
  height: 34.2px;
  margin-bottom: 15px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}
.dash-margin {
  margin-right: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-1 dash-margin">
    <div class="d-rec" id="rec">A</div>
  </div>
  <div class="col-md-1 dash-margin">
    <div class="c-rec" id="rec">B</div>
  </div>
  <div class="col-md-1 dash-margin">
    <div class="l-rec" id="rec">C</div>
  </div>
</div>

要查找的东西：

1， id="rec"在3div中使用了相同的ID，这是一个不好的语法，而不是 html

允许

2，始终使用类造型UI，这是更好，更混乱的。

我正在遵循您的方法，考虑到您可能无法控制CSS文件

希望这对您有帮助。

Answer 3

您可以通过添加活动类并删除它来这样做。

应该将ID更改为唯一。

$(document).ready(function() {
    $('.dash-margin > div').click(function(e) {  
	   $(this).toggleClass('active');
    });
});

/*Added active class in css*/
.active {
	border-top: 2px solid rgb(57, 205, 144);
	color: rgb(57, 205, 144);
	padding-top: 0px;
}
.l-rec{
	 background-color: #ffffff;
    font-family: Lato;
    font-size: 11.2px;
    font-weight: 500;
    text-align: center;
    color: #6a7c94;
    padding: 2px;
    width: 100px;
    margin-bottom: 15px;
    height: 34.2px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
  
}
.d-rec{
	 background-color: #ffffff;
    font-family: Lato;
    font-size: 11.2px;
    font-weight: 500;
    text-align: center;
    color: #6a7c94;
    padding: 2px;
    width: 100px;
    height: 34.2px;
    margin-bottom: 15px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}
.c-rec{
	 background-color: #ffffff;
    font-family: Lato;
    font-size: 11.2px;
    font-weight: 500;
    text-align: center;
    color: #6a7c94;
    padding: 2px;
    width: 100px;
    height: 34.2px;
    margin-bottom: 15px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
  
}
.dash-margin{
	margin-right: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
  <div class="col-md-1 dash-margin">
    <div class="d-rec" id="rec">A</div>
  </div>
  <div class="col-md-1 dash-margin">
    <div class="c-rec" id="rec2">B</div>
  </div>
  <div class="col-md-1 dash-margin">
    <div class="l-rec" id="rec3">C</div>
  </div>
</div>
</div>

Answer 4

我认为这是您需要的。您可以简单地使用toggleClass()方法和在CSS文件中移动CSS代码并使用Sippet下方的简单逻辑来实现此目标。

。

$(document).ready(function() {
  $('.d-rec,.l-rec').click(function(e) {
    $(this).toggleClass('highlight');
  });
  $('.c-rec').click(function(e) {
    if ($(this).hasClass('highlight'))
      $('.d-rec').removeClass('highlight');
    else
      $('.d-rec').addClass('highlight');
    $(this).toggleClass('highlight');
  });
});

.l-rec {
  background-color: #ffffff;
  font-family: Lato;
  font-size: 11.2px;
  font-weight: 500;
  text-align: center;
  color: #6a7c94;
  padding: 2px;
  width: 100px;
  margin-bottom: 15px;
  height: 34.2px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}
.d-rec {
  background-color: #ffffff;
  font-family: Lato;
  font-size: 11.2px;
  font-weight: 500;
  text-align: center;
  color: #6a7c94;
  padding: 2px;
  width: 100px;
  height: 34.2px;
  margin-bottom: 15px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}
.c-rec {
  background-color: #ffffff;
  font-family: Lato;
  font-size: 11.2px;
  font-weight: 500;
  text-align: center;
  color: #6a7c94;
  padding: 2px;
  width: 100px;
  height: 34.2px;
  margin-bottom: 15px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}
.dash-margin {
  margin-right: 15px;
}
.highlight {
  border-top: 2px solid #39cd90;
  color: rgb(57, 205, 144);
  padding-top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-1 dash-margin">
    <div class="d-rec">A</div>
  </div>
  <div class="col-md-1 dash-margin">
    <div class="c-rec">B</div>
  </div>
  <div class="col-md-1 dash-margin">
    <div class="l-rec">C</div>
  </div>
</div>

Answer 5

您可以按照您的需求来以下面的格式尝试您的代码。

 <div class="d-rec" id="recA">A</div>
 <div class="c-rec" id="recB">B</div>
 <div class="l-rec" id="recC">C</div>
    $('#recA').click(function(){
      $( ".d-rec" ).hasClass( "foo" )
          $('.d-rec').toggleClass("main");
    });
 $('#recB').click(function(){
          $( ".c-rec" ).hasClass( "foo" )
              $('.c-rec').toggleClass("main");
        });
 $('#recC').click(function(){
          $( ".l-rec" ).hasClass( "foo" )
              $('.l-rec').toggleClass("main");
        });

Answer 6

以下将以更好的方式解决您的问题

$(document).ready(function() {
    $('.d-rec').click(function(e) {  
  
    if($('.d-rec').hasClass('inactive')){
    	$('.d-rec').removeClass('inactive');
    	$('.d-rec').addClass('active');
    }else{
    	$('.d-rec').removeClass('active');
      $('.d-rec').addClass('inactive');
    }
    });
     $('.c-rec').click(function(e) {  
    if($('.c-rec').hasClass('inactive')){
    	$('.d-rec').removeClass('inactive');
    	$('.d-rec').addClass('active');
      $('.c-rec').removeClass('inactive');
    	$('.c-rec').addClass('active');
    }else{
    	$('.d-rec').removeClass('active');
      $('.d-rec').addClass('inactive');
      $('.c-rec').removeClass('active');
      $('.c-rec').addClass('inactive');
    }
    });
      $('.l-rec').click(function(e) {  
    if($('.l-rec').hasClass('inactive')){
    	$('.l-rec').removeClass('inactive');
    	$('.l-rec').addClass('active');
    }else{
    	$('.l-rec').removeClass('active');
      $('.l-rec').addClass('inactive');
    }
     
    });
});

.l-rec{
	 background-color: #ffffff;
    font-family: Lato;
    font-size: 11.2px;
    font-weight: 500;
    text-align: center;
    color: #6a7c94;
    padding: 2px;
    width: 100px;
    margin-bottom: 15px;
    height: 34.2px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
  
}
.d-rec{
	 background-color: #ffffff;
    font-family: Lato;
    font-size: 11.2px;
    font-weight: 500;
    text-align: center;
    color: #6a7c94;
    padding: 2px;
    width: 100px;
    height: 34.2px;
    margin-bottom: 15px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}
.inactive{
  border-top: 0px;
}
.active{
  border-top: 2px solid #39cd90;
  color:#39cd90
  
}
.c-rec{
	 background-color: #ffffff;
    font-family: Lato;
    font-size: 11.2px;
    font-weight: 500;
    text-align: center;
    color: #6a7c94;
    padding: 2px;
    width: 100px;
    height: 34.2px;
    margin-bottom: 15px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
  
}
.dash-margin{
	margin-right: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
  <div class="col-md-1 dash-margin">
    <div class="d-rec inactive" id="rec">A</div>
  </div>
  <div class="col-md-1 dash-margin">
    <div class="c-rec inactive" id="rec">B</div>
  </div>
  <div class="col-md-1 dash-margin">
    <div class="l-rec inactive" id="rec">C</div>
  </div>
</div>

Answer 7

$(document).ready(function() {
    $('.d-rec').click(function(e) { 
   if(jQuery('#rec1').attr('style')){
    $('#rec1').removeAttr("style");
    }
    else{
    $('.d-rec') .css({'border-top': '2px solid #39cd90','color': '#39cd90','padding-top': '0px'});
    }
    
    
    });
     $('.c-rec').click(function(e) {  
    if(jQuery('#rec2').attr('style')){
    $('#rec2').removeAttr("style");
     $('#rec1').removeAttr("style");
    }
    else{
    $('.d-rec') .css({'border-top': '2px solid #39cd90','color': '#39cd90','padding-top': '0px'});
    $('.c-rec') .css({'border-top': '2px solid #39cd90','color': '#39cd90','padding-top': '0px'});
    }
    
    });
      $('.l-rec').click(function(e) {  
    if(jQuery('#rec3').attr('style')){
    $('#rec3').removeAttr("style");
    }
    else{
    $('.l-rec') .css({'border-top': '2px solid #39cd90','color': '#39cd90','padding-top': '0px'});
    }
    });
});

.l-rec{
	 background-color: #ffffff;
    font-family: Lato;
    font-size: 11.2px;
    font-weight: 500;
    text-align: center;
    color: #6a7c94;
    padding: 2px;
    width: 100px;
    margin-bottom: 15px;
    height: 34.2px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
  
}
.d-rec{
	 background-color: #ffffff;
    font-family: Lato;
    font-size: 11.2px;
    font-weight: 500;
    text-align: center;
    color: #6a7c94;
    padding: 2px;
    width: 100px;
    height: 34.2px;
    margin-bottom: 15px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}
.c-rec{
	 background-color: #ffffff;
    font-family: Lato;
    font-size: 11.2px;
    font-weight: 500;
    text-align: center;
    color: #6a7c94;
    padding: 2px;
    width: 100px;
    height: 34.2px;
    margin-bottom: 15px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
  
}
.dash-margin{
	margin-right: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-1 dash-margin">
    <div class="d-rec" id="rec1">A</div>
  </div>
  <div class="col-md-1 dash-margin">
    <div class="c-rec" id="rec2">B</div>
  </div>
  <div class="col-md-1 dash-margin">
    <div class="l-rec" id="rec3">C</div>
  </div>
</div>