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

Question

我有一个容器和里面的 (2) 个引导按钮。当您单击其中一个按钮时，会显示图像和文本，另一个按钮会执行相同的功能，但会显示图像/文本。

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

几个小问题:

1. 我将“ session ”按钮设置为开始时显示为“事件”，颜色为紫色，但由于某种原因它无法正常工作。

2. 在我的 jQuery 中，我试图通过将两个类合二为一(' '，' ')隐藏元素之前来减少它的冗余，但它不起作用，它显示所有内容(两者图片和文字)。

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

由于我有相当多的 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>