猿问

求前端大神帮忙给下面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>
2
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
JavaScript
JQuery
我要回答