jq鼠标移入显示对应的数据

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{padding:0;margin:0;} .con {width:375px;height:680px;background:#e9f8fd;} .hedbq{overflow: hidden;margin: 0; padding: 0;} .hedbq li{ width: 25%; height: 30px; line-height: 30px; background:#f2f8f9; color:#4f6f72; float: left; list-style: none; text-align: center; } .hedbq li.bqtit{background:#87b8b5;} .content{width:80%;padding: 20px 10%; background:#f5fbfb;color:#87b8b5; height:600px; } .hide {display:none;} </style> </head> <body> <div class="con"> <ul id="hedbq" class="hedbq"> <li>常问常答</li> <li>新书推荐</li> <li>最新信息</li> <li>电子资源</li> </ul> <div class="content"> <div class="bqcont"> <p>中文图书自建数据库</p> </div> <div class="bqcont"> <p>中文图书自建数据库</p> <p>医学知识管理平台</p> </div> <div class="bqcont"> <p>外文电子期刊</p> </div> <div class="bqcont"> <p>数据库</p> </div> </div> </div> </body> <script src=" <script> $("#hedbq li").each(function(index) { var xuanze = $(this); $(this).mouseover(function(){ $(".bqcont").addClass("hide"); $("#hedbq li.bqtit").removeClass("bqtit"); $(".bqcont").eq(index).removeClass("hide"); xuanze.addClass("bqtit"); }).mouseout(function(){}) }) </script> </html>连样式都给你写好了，给个采纳吧

jq鼠标移入显示对应的数据

4回答