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

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

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

我将其设置为在单击文本链接后将“active”类添加到文本链接（用于样式设置）

在添加10个导航链接和相应的文本块之后，javascript代码变得非常长。我也希望这也适用于悬停，为什么？所以，在移动设备上，他们可以点击显示，在桌面上只需悬停即可

$（函数（）{
$（'.rollover-3'）。单击（函数（）{
$（'.rollover-text-3'）.show（）；
$（'.rollover-text-2'）.hide（）；
$（'.rollover-text-1'）.hide（）；
返回false；
});
$（'.rollover-2'）。单击（函数（）{
$（'.rollover-text-3'）.hide（）；
$（'.rollover-text-2'）.show（）；
$（'.rollover-text-1'）.hide（）；
返回false；
});
$（'.rollover-1'）。单击（函数（）{
$（'.rollover-text-3'）.hide（）；
$（'.rollover-text-2'）.hide（）；
$（'.rollover-text-1'）.show（）；
返回false；
});
});
$（函数（）{
$（“.rollover-3”）。单击（函数（）{
$（此）.addClass（“活动”）；
$（'.rollover-2'）。removeClass（'active'）；
$（'.rollover-text-1'）.removeClass（'active'）；
});
$（“.rollover-2”）。单击（函数（）{
$（此）.addClass（“活动”）；
$（'.rollover-3'）。removeClass（'active'）；
$（'.rollover-1'）。removeClass（'active'）；
});
$（“.rollover-1”）。单击（函数（）{
$（此）.addClass（“活动”）；
$（'.rollover-3'）。removeClass（'active'）；
$（'.rollover-2'）。removeClass（'active'）；
});
});
.rollover-text-2、.rollover-text-3{
显示：无；
}
.左导航{
宽度：50%；
浮动：左；
}
.对{
宽度：50%；
浮动：对；
}
a、 活跃的{
字体大小：粗体；
}
.rollover-text-1{
背景色：浅绿色；
}
.rollover-text-2{
背景颜色：黄色；
}
.rollover-text-3{
背景颜色：橙色；
}




测试1描述在这里
测试2描述在这里
测试3描述在这里

$（函数（）{
$（'.rollover'）。在（'click mouseover'，function（）上{
$（'.rollover text'）.hide（）；
$（'.rollover'）.removeClass（'active'）；
$（'..+this.dataset.tab）.show（）；
$（this.addClass（'active'）；
返回false；
});
});
.rollover-text-2、.rollover-text-3{
显示：无；
}
.左导航{
宽度：50%；
浮动：左；
}
.对{
宽度：50%；
浮动：对；
}
a、 活跃的{
字体大小：粗体；
}
.rollover-text-1{
背景色：浅绿色；
}
.rollover-text-2{
背景颜色：黄色；
}
.rollover-text-3{
背景颜色：橙色；
}




测试1描述在这里
测试2描述在这里
测试3描述在这里
这太棒了！我知道必须有一个更简单的方法！很好！