ssamuel的回复列表

可以使用数据属性将单击时要显示的div作为目标。为了区分$('showmcq,showoe,showlt,showas')中的每个按钮单击。单击(function(){}),可以使用$(this).attr('id'),它将为您提供在该函数中单击的按钮的ID。

$('#showMcq, #showOe, #showLt, #showAs').click(function() {
  $('.course-design-custom').addClass('d-none');
  var viewCourse = $(this).data('view');
  $('#'+viewCourse).removeClass('d-none');
});

.d-none{
  display:none;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="showMcq" data-view="McqView">MCQ</button>
<button id="showOe" data-view="OeView">Open Ended</button>
<button id="showLt" data-view="LearningTaskView">Learning Task</button>
<button id="showAs" data-view="AssessmentView">Assessment</button>
<div class="container">
  <div class="row course-design-custom" id="McqView">
    MCQ
  </div>
  <div class="row course-design-custom d-none" id="OeView">
    Open Ended
  </div>
  <div class="row course-design-custom d-none" id="LearningTaskView">
    Learning Task
  </div>
  <div class="row course-design-custom d-none" id="AssessmentView">
    Assessment
  </div>
</div>