Question

我有3个div：

点击“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'});

    });
});

Here is a complete code

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

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"在3 div中使用了相同的ID，这是一个错误的语法，而不是   允许在HTML中

2，总是使用类来固定用户界面，它会更好，更不凌乱。

我正在按照您的方法考虑可能您无法控制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

您可以使用以下格式试用您的代码。根据您的需要更改css类名称和属性

 <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 5

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

$(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 6

我认为这就是你所需要的。您可以使用toggleClass()方法并将css代码移动到css文件中并使用下面的代码段中的简单逻辑来实现此目的。

$(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 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>

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

7 个答案: