jq鼠标移入显示对应的数据
上面4个li标题，下面4个li内容,鼠标移入第1个li，下面内容对应第1个li,鼠标移入第2个li，下面内容对应第2个li。。不移动鼠标.默认显示全部内容!!! 用JQ的，新手，练习
慕粉3870905浏览 2622回答 4
4回答
-
业余奶茶品鉴师
<!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>连样式都给你写好了，给个采纳吧
随时随地看视频慕课网APP
相关分类
JQuery