JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="content">
   <a href="#" class="link1">link 1</a>
   <a href="#" class="link2">link 2</a>
   <div class="div1 hide">
     div 1
   </div>
   <div class="div2 hide">
     div 2
   </div>
 </div>

CSS

.hide{
  display:none;
}
.show{
  display:block;
}

JavaScript

const _Div1 = $(`.div1`);
const _Div2 = $(`.div2`);

function showDiv(owner,isShow){
	if(isShow)
		owner.addClass(`show`);
  else
  	owner.removeClass(`show`);
}

$(`.link1`).on(`click`,()=>{
	var div2IsShow = $(`.div2`).hasClass(`show`);
 	
  //check div2 is show
  if(div2IsShow){
		//show dialog
   var isConfirm =	confirm("Do you wanna show div1");
   if(!isConfirm){
   		return;
   }
	}
  //default click link 1 show div1 hide div2
	showDiv(_Div1 ,true);
  showDiv(_Div2 ,false);
});

$(`.link2`).on(`click`,()=>{

	//default click link 2 show div2 hide div1
		showDiv(_Div2 ,true);
  showDiv( _Div1,false);
});