可以使用数据属性将单击时要显示的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>
