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

Question

当单击左边的导航链接时，我创建了下面的脚本来显示右边的文本框。

这段代码似乎太基本了，我认为应该有一种更优雅的方法来编写javascript。

我将其设置为单击文本链接后将"active“类添加到文本链接中(用于样式设置)。

在添加了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>

​