Question

我有一个容器，其中有2个引导按钮。当您单击任一按钮时，将显示一个图像和文本，另一个按钮具有相同的功能，但具有受尊重的图像/文本。

我的客户要求在容器的侧面上使用箭头按钮，如果用户单击其中一个箭头按钮，则内容将根据按钮停止的位置进行更改。我的实际按钮可以很好地交换内容，在合并箭头按钮时我很难开始。我知道最简单的方法是if / else语句，但是我很难将其合并到我的工作jQuery中。

一些小问题：

我将“会议”按钮设置为以紫色开始为“活动”状态，但由于某种原因，它不起作用。
使用我的jQuery，我试图通过将两个类放在hide元素之前的一个（''，''）中来减少冗余，但是它不起作用，它显示所有内容图片和文字）。

我希望这是有道理的。任何方向表示赞赏！

由于我有很多HTML和CSS代码，因此可以在我的代码笔上查看所有内容：https://codepen.io/dec23rd1986/pen/PdEoZa?editors=1010

我的jQuery：

$(document).ready(function(){
  $('.feature_tasks').hide();
      $('.tasks_img').hide();
    $('#meeting_button').click (function(){
        $('.feature_tasks').hide();
      $('.tasks_img').hide();
$('.feature_info').fadeIn(3000);
      $('.meeting_img').show();

});

$('#tasks_button').click (function(){
$('.feature_info').hide();
  $('.meeting_img').hide();
$('.feature_tasks').fadeIn(3000);
  $('.tasks_img').show();
  });  
});

Answer 1

我认为您想实现这一目标，

demo

$(document).ready(function() {
    $('.feature_tasks').hide();
    $('.tasks_img').hide();

    var option_selected = "meeting";
    
    $('#meeting_button').click(function() {
        $(this).addClass("active");
        $('#tasks_button').removeClass("active");
        $('.feature_tasks').hide();
        $('.tasks_img').hide();
        $('.feature_info').fadeIn(3000);
        $('.meeting_img').show();

    });

    $('#tasks_button').click(function() {
        $(this).addClass("active");
        $('#meeting_button').removeClass("active");
        $('.feature_info').hide();
        $('.meeting_img').hide();
        $('.feature_tasks').fadeIn(3000);
        $('.tasks_img').show();
    });

    $('.carousel-control-prev, .carousel-control-next').click(function() {
    	if(option_selected == "meeting"){
        	$('#tasks_button').trigger('click');   
        	option_selected = "tasks"; 	
    	}
    	else{
        	$('#meeting_button').trigger('click');
        	option_selected = "meeting"; 	
    	}
    });

});

body,html {
    background-color: #fff;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
}

h1{
  text-align: center;
}

#meeting_button{
  margin-top: 20px;
}
#tasks_button{
  margin-top: 20px;
  margin-bottom: 0px;
}

.jumbo_features {  
    background-color: #eae8f5;
    background-size: cover;
    border-radius: 30px;
    width: 55%;
}

.btn {
    background-color: #eae8f5;
    color: black;
    border-radius: 30px;
    padding: 7px 10px;
    width: 175px;
    border-color: #D34ED5;   
}

.btn:focus, .btn:hover, .btn:active, .active{
  background-color: #D34ED5 !important;
  color: #fff;
  box-shadow: none;
}

.feature_info{
    font-size: 12px;
    margin-top: 1rem;
    margin-right: .5rem;
    margin-left: .5rem;
}

.feature_tasks{
  font-size: 12px;
  margin-right: .5rem;
  margin-left: .5rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<br>
   <div class="container-fluid jumbo_features">
    <div class="row">
     <div class="col-md-6">
      <img src="https://image.ibb.co/ijvTfU/feature_meeting.png" class="meeting_img">
      
      <img src="https://image.ibb.co/hZNxPp/feature_tasks.png" class="tasks_img"></div>
      
     <div class="col-md-6">
      <button type="button"  class="btn active" aria-pressed="true" id="meeting_button">Meeting</button>
      <button type="button" class="btn" aria-pressed="true" id="tasks_button">Tasks</button>
       
     <!--Meeting-->
     <p class="feature_info"><b>Schedules Meetings:</b><br> Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
     <p class="feature_info"><b>Attends Meetings:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
     <p class="feature_info "><b>Takes meeting notes:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
      <!--Tasks-->
       <p class="feature_tasks"><b>Example One</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
              <p class="feature_tasks"><b>Example Two</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
              <p class="feature_tasks"><b>Example Three</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>

         </div>
          </div>
       </div>
     
      <br>
       </div>
      </div>  
    </div>
  <a class="carousel-control-prev" href="#" role="button" data-slide="prev"><img src="https://image.ibb.co/fkqbjp/previous_arrow.png"></a>
  <a class="carousel-control-next" href="#" role="button" data-slide="next"><img src="https://image.ibb.co/kRFFc9/next_arrow.png"></a>
</div>

Answer 2

$(document).ready(function(){ 

$('.feature_tasks').hide();
$('.tasks_img').hide();
$('#meeting_button').click (function(){
     $('.feature_tasks').hide();
     $('.tasks_img').hide();
     $('.feature_info').fadeIn(3000);
     $('.meeting_img').show();
});
$('#tasks_button').click (function(){
     $('.feature_info').hide();
     $('.meeting_img').hide();
     $('.feature_tasks').fadeIn(3000);
     $('.tasks_img').show();
});

$('.meeting_img').click (function(){
   $('#meeting_button').trigger('click');
});

$('.tasks_img').click (function(){
    $('#tasks_button').trigger('click');
});

});

Answer 3

这就是我要这样做的方式：我只保留两个类：tasks和meetings。这样，我可以使用一个命令显示/隐藏所有meetings和tasks。 js大致符合以下情况：

$('.meetings', '.jumbo_features')[isMeetings ? 'show' : 'hide']();

演示：

$('button', '.jumbo_features').on('click', function() {
  let isMeetings = $(this).is('#meeting_button');
  // show/hide all meetings and tasks:
  $('.meetings', '.jumbo_features')[isMeetings ? 'show' : 'hide']();
  $('.tasks', '.jumbo_features')[isMeetings ? 'hide' : 'show']();
  
  // remove active from all buttons:
  $('button', '.jumbo_features').removeClass('active').attr('aria-pressed', 'false');
  // add active based on which was pressed
  $(this).addClass('active').attr('aria-pressed', 'true');
})
$('#meeting_button').trigger('click');

body,
html {
  background-color: #fff;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
}

h1 {
  text-align: center;
}

#meeting_button {
  margin-top: 20px;
}

#tasks_button {
  margin-top: 20px;
  margin-bottom: 0px;
}

.jumbo_features {
  background-color: #eae8f5;
  background-size: cover;
  border-radius: 30px;
  width: 55%;
  margin-top: 30px;
}

button.btn {
  background-color: #eae8f5;
  color: black;
  border-radius: 30px;
  padding: 7px 10px;
  width: 175px;
  border-color: #D34ED5;
}

button.btn:focus,
button.btn:hover,
button.btn:active,
button.btn.active {
  background-color: #D34ED5 !important;
  color: #fff;
  box-shadow: none;
  outline: none;
}

.jumbo_features p {
  font-size: 12px;
  margin-top: 1rem;
  margin-right: .5rem;
  margin-left: .5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.9/js/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>


  <div class="container jumbo_features">
    <div class="row">
      <div class="col-md-6 text-center">
        <img src="https://image.ibb.co/ijvTfU/feature_meeting.png" class="meetings">
        <img src="https://image.ibb.co/hZNxPp/feature_tasks.png" class="tasks"></div>
      <div class="col-md-6">
        <button type="button" class="btn active waves-effect waves-light" aria-pressed="true" id="meeting_button">Meeting</button>
        <button type="button" class="btn waves-effect waves-light" aria-pressed="false" id="tasks_button">Tasks</button>
        <!--Meeting-->
        <p class="meetings"><b>Schedules Meetings:</b><br> Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        <p class="meetings"><b>Attends Meetings:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        <p class="meetings"><b>Takes meeting notes:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        <!--Tasks-->
        <p class="tasks"><b>Example One</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        <p class="tasks"><b>Example Two</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        <p class="tasks"><b>Example Three</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
      </div>
    </div>
  </div>

针对这些情况的更简单解决方案是在父级上添加/删除单个类（在下面的示例中为“切换”），然后使用CSS来显示/隐藏（或设置动画）所有内容：

相关代码：

  $('.jumbo_features')[
    $(this).is('#meeting_button') ? 
      'removeClass' : 
      'addClass'
   ]('toggled');

.tasks, .toggled .meetings {display: none}
.toggled .tasks, .meetings {display:block}

查看其工作原理：

$('button', '.jumbo_features').on('click', function() {
  $('.jumbo_features')[$(this).is('#meeting_button') ? 'removeClass' : 'addClass']('toggled');
  
  $('button', '.jumbo_features').removeClass('active').attr('aria-pressed', 'false');
  $(this).addClass('active').attr('aria-pressed', 'true');
})

body,
html {
  background-color: #fff;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
}

h1 {
  text-align: center;
}

.jumbo_features button{
  margin-top: 20px;
}

.jumbo_features {
  background-color: #eae8f5;
  background-size: cover;
  border-radius: 30px;
  width: 55%;
  margin-top: 30px;
}

button.btn {
  background-color: #eae8f5;
  color: black;
  border-radius: 30px;
  padding: 7px 10px;
  width: 175px;
  border-color: #D34ED5;
}

button.btn:focus,
button.btn:hover,
button.btn:active,
button.btn.active {
  background-color: #D34ED5 !important;
  color: #fff;
  box-shadow: none;
  outline: none;
}

.jumbo_features p {
  font-size: 12px;
  margin-top: 1rem;
  margin-right: .5rem;
  margin-left: .5rem;
}

.tasks, .toggled .meetings {display: none}
.toggled .tasks, .meetings {display:block}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.9/js/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>


  <div class="container jumbo_features">
    <div class="row">
      <div class="col-md-6 text-center">
        <img src="https://image.ibb.co/ijvTfU/feature_meeting.png" class="meetings">
        <img src="https://image.ibb.co/hZNxPp/feature_tasks.png" class="tasks"></div>
      <div class="col-md-6">
        <button type="button" class="btn active waves-effect waves-light" aria-pressed="true" id="meeting_button">Meeting</button>
        <button type="button" class="btn waves-effect waves-light" aria-pressed="false" id="tasks_button">Tasks</button>
        <!--Meeting-->
        <p class="meetings"><b>Schedules Meetings:</b><br> Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        <p class="meetings"><b>Attends Meetings:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        <p class="meetings"><b>Takes meeting notes:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        <!--Tasks-->
        <p class="tasks"><b>Example One</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        <p class="tasks"><b>Example Two</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
        <p class="tasks"><b>Example Three</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
      </div>
    </div>
  </div>

jQuery if / else语句，可使用多个按钮切换内容

3 个答案: