求前端大神帮忙给下面html写一段Tab鼠标经过显示代码！！
<div class="titTab"> <!--鼠标滑动标签--> <div id="keyword" class="ctype2"> <div id="datllTab_1" class="datllTab">标题1</div> <div id="datllTab_2" class="datllTab">标题2</div> <div id="datllTab_3" class="datllTab">标题3</div> <div id="datllTab_4" class="datllTab">标题4</div> <div id="datllTab_5" class="datllTab">标题5</div> <div id="datllTab_6" class="datllTab">标题6</div> <div id="datllTab_7" class="datllTab">标题7</div> <div id="datllTab_8" class="datllTab">标题8</div> </div> <!--鼠标滑动显示对应内容--> <div id="datllTab_a1"class="completetips" style="display:none;">内容1</div> <div id="datllTab_a2"class="completetips" style="display:none;">内容2</div> <div id="datllTab_a2"class="completetips" style="display:none;">内容3</div> <div id="datllTab_a4"class="completetips" style="display:none;">内容4</div> <div id="datllTab_a5"class="completetips" style="display:none;">内容5</div> <div id="datllTab_a6"class="completetips" style="display:none;">内容6</div> <div id="datllTab_a7"class="completetips" style="display:none;">内容7</div> <div id="datllTab_a8"class="completetips" style="display:none;">内容8</div> </div>
我只学了点 html+css 。实在不懂js 啊。 求帮帮忙。
愤怒de小菜鸟浏览 2865回答 1
1回答
-
weibo_歌笠横_0
你要的是这种效果吗，给你个例子，没用js的<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin:0; padding: 0; } header{ padding-top: 50px; padding-left: 300px; } ul li{ width: 150px; height: 35px; float: left; list-style: none; line-height: 35px; font-weight: bold; } ul li:hover{ background: gray; } ol{ display: none; } ul li:hover>ol{ display: block; } </style></head><body> <header> <ul> <li>手机 <ol> <li>苹果</li> <li>三星</li> <li>华为</li> <li>oppo</li> </ol> </li> <li>手表 <ol> <li>劳力士</li> <li>天梭</li> <li>老皮匠</li> <li>雷欧</li> </ol> </li> <li>电脑 <ol> <li>苹果</li> <li>华硕</li> <li>戴尔</li> <li>联想</li> </ol> </li> <li>男装 <ol> <li>阿玛尼</li> <li>阿迪</li> <li>李宁</li> <li>七匹狼</li> </ol> </li> </ul> </header></body></html>
随时随地看视频慕课网APP
Html/CSS
JavaScript
JQuery