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>