मेरे पास 3 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'});

    });
});

यहाँ एक पूरा कोड है

क्या कोई कृपया बता सकता है कि लक्ष्य कैसे प्राप्त करें

-1
lakshmi priya 26 मार्च 2018, 13:50

6 जवाब

सबसे बढ़िया उत्तर

मुझे लगता है कि आपको यही चाहिए था। आप इसे आसानी से toggleClass() विधि का उपयोग करके और अपने सीएसएस कोड को एक सीएसएस फ़ाइल में ले जाकर और नीचे दिए गए स्निपेट के रूप में सरल तर्क का उपयोग करके प्राप्त कर सकते हैं।

$(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>
0
Makarand Patil 26 मार्च 2018, 11:29
$(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>
0
Ajithamol A 26 मार्च 2018, 12:39

निम्नलिखित आपकी समस्या को बेहतर तरीके से हल करेगा

$(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>
0
samyak bhalerao 26 मार्च 2018, 11:13

आप नीचे दिए गए प्रारूप में अपना कोड आज़मा सकते हैं। अपनी आवश्यकता के अनुसार सीएसएस वर्ग का नाम और संपत्ति बदलें

 <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");
        });
0
Mahi Parmar 26 मार्च 2018, 11:04

आप एक सक्रिय वर्ग जोड़कर और इसे हटाकर ऐसा कर सकते हैं।

आईडी को अद्वितीय होने के लिए बदलना चाहिए।

$(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>
1
Athul Nath 26 मार्च 2018, 11:18

सबसे पहले: आईडी अद्वितीय होनी चाहिए। आपके पास एक ही आईडी के साथ तीन डिव हैं, जो इसे अद्वितीय नहीं बनाता है, इसलिए, हम आपके 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');
    });
});

और अपने सीएसएस को हाइलाइट-क्लास में परिभाषित करें:

.highlight {
    border-top: 2px solid #39cd90;
    color: #39cd90;
    padding-top: 0px;
}
4
rblarsen 26 मार्च 2018, 11:00