如何在单击其他按钮时将所有选定的按钮恢复为原始按钮？

时间：2017-07-04 23:11:10

标签： jquery html css

当我设计我的开关时，我就这样做了，当点击开启按钮时，关闭的颜色变回原来的颜色，当点击关闭按钮时，开启按钮变回原来的颜色。

但是，当我在div中使用多个开关时，我希望一个开关的on按钮关闭所有按下的按钮。香港专业教育学院尝试使用此代码完成此代码：

＆＃13;
＆＃13; 
$("#darkmodeon, #colorfulon").click(function() {
  $('#responsiveoff').css({
    "background-color": "#d8d8d8",
    "color": "#777777",
    "transition": "all 0.2s ease"
  });
});
＆＃13; 
#dropdowns > div {
  display: block !important;
}

body {
  margin: 0 auto;
  width: 950px;
  /* border: solid;
    	border-color: black; */
  background-color: #f2f2f2;
}

/*--------------Navigation Bar------------*/

#navbar {
  width: 100%;
  background-color: white;
  overflow: auto;
  position: fixed;
  left: 0px;
  top: 0px;
  border-bottom: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  overflow: hidden;
  z-index: 10;
}

#nav-container {
  max-width: 950px;
  min-width: 875px;
  margin: 0 auto;
}

#nav-container h1 {
  float: left;
  margin: 0 auto;
  padding-top: 10px;
  font-family: "calibri light";
  font-size: 25px;
  letter-spacing: 0.3em;
  margin-left: 5px;
  transition: color 0.3s ease;
}

#nav-container a {
  float: right;
  display: block;
  padding: 15px 15px;
  text-decoration: none;
  color: black;
  font-family: "calibri light", sans-serif;
  font-size: 18px;
  transition: background-color 0.5s ease;
}

#nav-container a:hover {
  background-color: #f4f4f4;
  transition: background-color 0.5s ease;
}

#nav-container a:active {
  background-color: #bfbfbf;
}

#nav-container h1:hover {
  color: #aaaaaa;
  transition: color 0.3s ease;
}

#webdsn-drop {
  padding: 75px 0 0 0;
  background-color: rgba(252, 252, 252, 0.95);
  border-bottom: solid 1px #d8d8d8;
  height: 200px;
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  z-index: 9;
  display: none;
}

#webdsn-content {
  width: 950px;
  margin: 0 auto;
}

#pfdsn-drop {
  padding: 75px 0 0 0;
  background-color: rgba(252, 252, 252, 0.95);
  border-bottom: solid 1px #d8d8d8;
  height: 200px;
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  z-index: 9;
  display: none;
}

#pfdsn-content {
  width: 950px;
  margin: 0 auto;
}

#bc-drop {
  padding: 75px 0 0 0;
  background-color: rgba(252, 252, 252, 0.95);
  border-bottom: solid 1px #d8d8d8;
  height: 200px;
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  z-index: 9;
  display: none;
}

#bcdsn-content {
  width: 950px;
  margin: 0 auto;
}

#ldsn-drop {
  padding: 75px 0 0 0;
  background-color: rgba(252, 252, 252, 0.95);
  border-bottom: solid 1px #d8d8d8;
  height: 200px;
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  z-index: 9;
  display: none;
}

#ldsn-content {
  width: 950px;
  margin: 0 auto;
}


/*----------THEMES-DROPDOWN-AREA--------*/

#switches-container {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

#themes-drop {
  padding: 75px 0 0 0;
  background-color: rgba(252, 252, 252, 0.95);
  border-bottom: solid 1px #d8d8d8;
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  z-index: 9;
  display: none;
}

#themes-content {
  width: 950px;
  margin: 0 auto;
}


/*--SWITCH--*/

.theme-switch {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 295px;
}

.themename {
  font-family: 'calibri light';
  font-weight: bold;
  font-size: 20.5px;
  color: #777777;
  position: relative;
  top: 15.5px;
  display: inline-block;
}

#darkmodebox {
  width: 240px;
}

.switchcontainer {
  background-color: white;
  display: flex;
  justify-content: space-between;
  border: solid 2px #d8d8d8;
  border-radius: 50px;
  width: 100px;
  padding: 5px;
  margin: 25px 10px;
}

button {
  width: 37px;
  height: 37px;
  border: none;
  border-radius: 50px;
  background-color: #d8d8d8;
  color: #777777;
  font-family: 'calibri light';
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
}


/*--------------------------------------*/

.subname-container {
  display: block;
}

.subname {
  color: black;
  border: solid;
  border-width: 1px;
  border-radius: 7.5px;
  padding: 5px 15px;
  display: inline;
  font-family: 'calibri light';
  letter-spacing: 2.5px;
  transition: background-color, color, 0.5s ease;
}

.subname:hover {
  background-color: #353535;
  border-color: white;
  color: white;
  transition: background-color, color, 0.5s ease;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>

<head>

  <title>Home</title>
  <link id="defaultcss" rel="stylesheet" type="text/css" href="main.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src='script.js' type='text/javascript'></script>

</head>

<body>

  <div id="navbar">
    <div id="nav-container">
      <h1>PORTFOLIO</h1>
      <a id="themes" href="#">Theme Settings</a>
      <a id="ld" href="#">Logo Design</a>
      <a id="bc" href="#">Business Cards</a>
      <a id="pf" href="posters+flyers.html">Posters & Flyers</a>
      <a id="web" href="#">Website Design</a>

    </div>
  </div>

  <div id="dropdowns">
    <div id='webdsn-drop'>
      <div id="webdsn-content">
        <h2 class="subname">WEBSITE DESIGN</h2>
      </div>
    </div>

    <div id='pfdsn-drop'>
      <div id="pfdsn-content">
        <h2 class="subname">POSTERS & FLYERS</h2>
      </div>
    </div>

    <div id="bc-drop">
      <div id="bcdsn-content">
        <h2 class="subname">BUSINESS CARDS</h2>
      </div>
    </div>

    <div id="ldsn-drop">
      <div id="ldsn-content">
        <h2 class="subname">LOGO DESIGN</h2>
      </div>
    </div>

    <div id="themes-drop">
      <div id="themes-content">

        <div class="subname-container">
          <h2 class="subname">THEME SETTINGS</h2>
        </div>

        <div id="switches-container">
          <div id="darkmodebox" class="theme-switch">
            <p class="themename">DARK MODE</p>
            <div class="switchcontainer">

              <button id="darkmodeon">ON</button>
              <button id="darkmodeoff">OFF</button>
            </div>
          </div>

          <div class="theme-switch">
            <p class="themename">COLOURFUL MODE</p>
            <div class="switchcontainer">

              <button id="colorfulon">ON</button>
              <button id="colorfuloff">OFF</button>
            </div>
          </div>

          <div class="theme-switch">
            <p class="themename">RESPONSIVE MODE</p>
            <div class="switchcontainer">

              <button id="responsiveon">ON</button>
              <button id="responsiveoff">OFF</button>
            </div>
          </div>

        </div>

      </div>

    </div>

  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

完整的JAVASCRIPT：

＆＃13;
＆＃13; 
$(document).ready(function(){
    		
        $('#web').hover(function(){
            $('#webdsn-drop').slideDown(250);
        },
        function(){
          $('#webdsn-drop').hover(function(){}, function(){$(this).slideUp(250);});
        
    	if($('#webdsn-drop').is(':visible'))
    		$('#webdsn-drop').slideUp(250);
    	
    	});
    	
    	$('#webdsn-drop').mouseenter(function(){
            $(this).stop();
        });
    	
    	
    	
    	$('#pf').hover(function(){
            $('#pfdsn-drop').slideDown(250);
        },
        function(){
          $('#pfdsn-drop').hover(function(){}, function(){$(this).slideUp(250);});
    	if($('#pfdsn-drop').is(':visible'))
    		$('#pfdsn-drop').slideUp(250);
    	});
    	$('#pfdsn-drop').mouseenter(function(){
            $(this).stop();
        });
    	
    	
    	
    	$('#bc').hover(function(){
            $('#bc-drop').slideDown(250);
        },
        function(){
          $('#bc-drop').hover(function(){}, function(){$(this).slideUp(250);});
    	if($('#bc-drop').is(':visible'))
    		$('#bc-drop').slideUp(250);
    	});
    	$('#bc-drop').mouseenter(function(){
            $(this).stop();
        });
    		
    	
    	
    	$('#ld').hover(function(){
            $('#ldsn-drop').slideDown(250);
        },
        function(){
          $('#ldsn-drop').hover(function(){}, function(){$(this).slideUp(250);});
    	if($('#ldsn-drop').is(':visible'))
    		$('#ldsn-drop').slideUp(250);
    	});
    	$('#ldsn-drop').mouseenter(function(){
            $(this).stop();
        });
    	
    	
    	
    	$('#themes').hover(function(){
            $('#themes-drop').slideDown(250);
        },
        function(){
          $('#themes-drop').hover(function(){}, function(){$(this).slideUp(250);});
    	if($('#themes-drop').is(':visible'))
    		$('#themes-drop').slideUp(250);
    	});
    	$('#themes-drop').mouseenter(function(){
            $(this).stop();
        });		
    
    //-----------DARK-MODE-SWITCH-----------
    
    	var darkon = '#darkmodeon';
    	var darkoff = '#darkmodeoff';
    	
    	$('#darkmodeoff')[0].style.backgroundColor = "#85c452";
      $('#darkmodeoff')[0].style.color = "white";
    
      $(darkon).click(function() {
        $(this).css({
          "background-color": "#85c452",
          "color": "white",
          "transition": "all 0.2s ease"
        });
        $('#darkmodeoff').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });
    
      $(darkoff).click(function() {
        $(this).css({
          "background-color": "#85c452",
          "color": "white",
          "transition": "all 0.2s ease"
        });
        $('#darkmodeon').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });
      
      
      
      var colorfulon = '#colorfulon';
    	var colorfuloff = '#colorfuloff';
    	
    	$('#colorfuloff')[0].style.backgroundColor = "#85c452";
      $('#colorfuloff')[0].style.color = "white";
    
      $(colorfulon).click(function() {
        $(this).css({
          "background-color": "#85c452",
          "color": "white",
          "transition": "all 0.2s ease"
        });
        $('#colorfuloff').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });
    
      $(colorfuloff).click(function() {
        $(this).css({
          "background-color": "#85c452",
          "color": "white",
          "transition": "all 0.2s ease"
        });
        $('#colorfulon').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });
    		
    
    		
      var responson = '#responsiveon';
    	var responsoff = '#responsiveoff';
    	
    	$('#responsiveoff')[0].style.backgroundColor = "#85c452";
      $('#responsiveoff')[0].style.color = "white";
    
      $(responson).click(function() {
        $(this).css({
          "background-color": "#85c452",
          "color": "white",
          "transition": "all 0.2s ease"
        });
        $('#responsiveoff').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });
    
      $(responsoff).click(function() {
        $(this).css({
          "background-color": "#85c452",
          "color": "white",
          "transition": "all 0.2s ease"
        });
        $('#responsiveon').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });
    		
    
    //-------------CSS-STYLES-------------------
    	
    	$('#darkmodeon').click(function (){
    	   $('link[href="main.css"]').attr('href','dark-main.css');
    	});
    	$('#darkmodeoff').click(function (){
    	   $('link[href="dark-main.css"]').attr('href','main.css');
    	});
    
    	
    	$('#colorfulon').click(function (){
    	   $('link[href="main.css"]').attr('href','colorful-main.css');
    	});
    	$('#colorfuloff').click(function (){
    	   $('link[href="colorful-main.css"]').attr('href','main.css');
    	});
    	
    	$('#responsiveon').click(function (){
    	   $('link[href="main.css"]').attr('href','responsive-main.css');
    	});
    	$('#responsiveoff').click(function (){
    	   $('link[href="responsive-main.css"]').attr('href','main.css');
    	});
    	
    });
    
    //-----------------RESET-ALL-SWITCH----------------
    
    
    $("#darkmodeon, #colorfulon").click(function(){
    	  $('#responsiveoff').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });

    });
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：3)

你在jQuery中看起来非常精明所以，我会给你一个我会用的方法。

单击按钮时，我会添加active课程。在添加active类之前，我会从所有其他元素中删除active类。

这样的事情：

$('#some-id button').click(function () {
    $('#some-id .active').removeClass('active');
    $(this).addClass('active')
});

然后我会用你想要的任何颜色设置活动类。

玩它，如果你还没有得到它，我会提供进一步的帮助。

答案 1 :(得分：1)

我建议你为按钮使用面向类的方法，为每个主题使用数据属性。然后，您只需要一个事件监听器用于所有按钮

<div class="switchcontainer" data-theme="colorful">
      <button class="on-btn">ON</button>
      <button class="off-btn">OFF</button>
</div>

然后在单击按钮时切换父switchcontainer上的活动类...同时从其他人​​中删除活动类。

简化示例：

$('.switchcontainer button').click(function(e) {
  var $btn = $(this),
    isOnBtn = $btn.hasClass('on-btn'),
    $cont = $btn.parent(),
    theme = $cont.data('theme');

  if (isOnBtn) {
    // remove active class from other button groups
    $('.switchcontainer.active').removeClass('active');
    //do something with new theme
    console.log('New theme:', theme)
  }
  // toggle active class on current container
  $cont.toggleClass('active', isOnBtn);
});
.switchcontainer.active .on-btn {
  background: green;
  color:yellow;      
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="switches-container">

  <div class="theme-switch">
    <p class="themename">COLOURFUL MODE</p>
    <div class="switchcontainer" data-theme="colorful">
      <button class="on-btn">ON</button>
      <button class="off-btn">OFF</button>
    </div>
  </div>

  <div class="theme-switch">
    <p class="themename">RESPONSIVE MODE</p>
    <div class="switchcontainer" data-theme="responsive">
      <button class="on-btn">ON</button>
      <button class="off-btn">OFF</button>
    </div>
  </div>

</div>

相关问题
最新问题