JQuery在文本链接的单击和悬停上显示div-一个更优雅的解决方案？

Question

我创建了以下脚本，以在单击左侧的导航链接时在右侧显示一个文本框。

这段代码似乎太基础了，我认为必须有一种更优雅的方式来编写javascript。

我将其设置为在单击文本链接后将“活动”类添加到文本链接（出于样式目的）。

添加10个导航链接和相应的文本块后，javascript代码变得很长。我也希望它也可以悬停工作，为什么呢？因此，在移动设备上，他们可以单击以显示，而在台式机上，只需将鼠标悬停即可。

$(function() {
   $('.rollover-3').click(function() {
       $('.rollover-text-3').show();
       $('.rollover-text-2').hide();
       $('.rollover-text-1').hide();
       return false;
   });
   $('.rollover-2').click(function() {
       $('.rollover-text-3').hide();
       $('.rollover-text-2').show();
       $('.rollover-text-1').hide();
       return false;
   });
   $('.rollover-1').click(function() {
       $('.rollover-text-3').hide();
       $('.rollover-text-2').hide();
       $('.rollover-text-1').show();
       return false;
   });
});
   
   
$(function() { 
  $(".rollover-3").click(function() {  
    $(this).addClass("active");
    $('.rollover-2').removeClass('active');
    $('.rollover-text-1').removeClass('active');
  });

  $(".rollover-2").click(function() {  
    $(this).addClass("active");
    $('.rollover-3').removeClass('active');
    $('.rollover-1').removeClass('active');
  });

  $(".rollover-1").click(function() {  
    $(this).addClass("active");
    $('.rollover-3').removeClass('active');
    $('.rollover-2').removeClass('active');
  });
});

.rollover-text-2, .rollover-text-3 {
   display: none;
}
.leftnav {
    width:50%;
    float:left;
}
.right {    
    width:50%;
    float:right;
 }
 a.active {
     font-weight: bold;
 }
 
 .rollover-text-1 {
     background-color: aqua;
 }
  .rollover-text-2 {
     background-color: yellow;
 }
  .rollover-text-3 {
     background-color: orange;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="leftnav">
    <p><a class="rollover-1 active" href="#">Link 1</a></p>
    <p><a class="rollover-2" href="#">Link 1</a></p>
    <p><a class="rollover-3" href="#">Link 1</a></p>
</div>

<div class="right">
    <div class="rollover-text-1">Test 1 description here</div>
    <div class="rollover-text-2">Test 2 description here</div>
    <div class="rollover-text-3">Test 3 description here</div>
</div>

Answer 1

$(function() {
   $('.rollover').on('click mouseover', function() {
       $('.rollover-text').hide();
       $('.rollover').removeClass('active');
       $('.' + this.dataset.tab).show();
       $(this).addClass('active');
       return false;
   });
});

.rollover-text-2, .rollover-text-3 {
   display: none;
}
.leftnav {
    width:50%;
    float:left;
}
.right {    
    width:50%;
    float:right;
 }
 a.active {
     font-weight: bold;
 }
 
 .rollover-text-1 {
     background-color: aqua;
 }
  .rollover-text-2 {
     background-color: yellow;
 }
  .rollover-text-3 {
     background-color: orange;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="leftnav">
    <p><a data-tab="rollover-text-1" class="rollover rollover-1 active" href="#">Link 1</a></p>
    <p><a data-tab="rollover-text-2" class="rollover rollover-2" href="#">Link 1</a></p>
    <p><a data-tab="rollover-text-3" class="rollover rollover-3" href="#">Link 1</a></p>
</div>

<div class="right">
    <div class="rollover-text rollover-text-1">Test 1 description here</div>
    <div class="rollover-text rollover-text-2">Test 2 description here</div>
    <div class="rollover-text rollover-text-3">Test 3 description here</div>
</div>