Tab小说切换效果

最新推荐文章于 2025-12-18 11:32:02 发布

原创最新推荐文章于 2025-12-18 11:32:02 发布 · 626 阅读

CC 4.0 BY-SA版权

文章标签：

js代码

/**
 * 定义方法实现切换显示.
 */
function hide() {
    document.getElementById('book1').style.display = 'none';
    document.getElementById('book2').style.display = 'none';
    document.getElementById('book3').style.display = 'none';
    document.getElementById('bg1').classList.add('nobg')
    document.getElementById('bg2').classList.add('nobg')
    document.getElementById('bg3').classList.add('nobg')
}
hide()
document.getElementById('book1').style.display = 'block';
document.getElementById('bg1').classList.remove('nobg')
document.getElementById('bg1').classList.add('bg')
function f() {
    hide()
    document.getElementById('book1').style.display = 'block';
    document.getElementById('bg1').classList.remove('nobg')
    document.getElementById('bg1').classList.add('bg')
}
function f1() {
    hide()
    document.getElementById('book2').style.display = 'block';
    document.getElementById('bg2').classList.remove('nobg')
    document.getElementById('bg2').classList.add('bg')
}
function f2() {
    hide()
    document.getElementById('book3').style.display = 'block';
    document.getElementById('bg3').classList.remove('nobg')
    document.getElementById('bg3').classList.add('bg')
}

html代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>TAB切换</title>
    <link href="css/tab.css" rel="stylesheet">
    <script src="js/tab.js"></script>
</head>

<body>
<div class="div_bg">
    <ul><!-- 在 js/tab.js 中定义方法切换显示 -->
       <li id="bg1"><a class="white" onmousemove="f()">小说</a></li>
       <li id="bg2"><a class="white" onmouseover="f1()">非小说</a></li>
       <li id="bg3"><a class="white" onmouseover="f2()">少儿</a></li>
    </ul>
    <div id="book1">
       <a  href="#" target=_blank>1.逍遥游</a><br>
       <a   href="#" target=_blank>2.懈怠</a><br>
       <a   href="#" target=_blank>3.最好的告别</a><br>
       <a   href="#" target=_blank>4.七个疯子</a><br>
       <a   href="#" target=_blank>5.帝国游戏</a><br>
       <a   href="#" target=_blank>6.未来简史</a><br>
       <a   href="#" target=_blank>7.思考的力量</a><br>
       <a   href="#" target=_blank>8.将夜</a>
    </div>
    <div id="book2">
       <a   href="#" target=_blank>1.人生若只如初见</a><br>
       <a   href="#" target=_blank>2.高效能人士的七个..</a><br>
       <a   href="#" target=_blank>3.求医不如求己</a><br>
       <a   href="#" target=_blank>4.人体使用手册</a><br>
       <a   href="#" target=_blank>5.孩子，把你的手给我</a><br>
       <a   href="#" target=_blank>6.别笑！我是英文单词书</a><br>
       <a   href="#" target=_blank>7.人体经络使用手册</a><br>
       <a   href="#" target=_blank>8.股市稳赚</a>
    </div>
    <div id="book3">
       <a   href="#" target=_blank>1.小王子..</a><br>
       <a   href="#" target=_blank>2.你的孩子不是你的孩子..</a><br>
       <a   href="#" target=_blank>3.夜莺与玫瑰..</a><br>
       <a   href="#" target=_blank>4.总有一天你会长大</a><br>
       <a   href="#" target=_blank>5.培养孩子的情商..</a><br>
       <a   href="#" target=_blank>6.给孩子读诗</a><br>
       <a   href="#" target=_blank>7.谁动了我的奶酪</a><br>
       <a   href="#" target=_blank>8.路野仙踪</a>
    </div>
</div>
 <script src="js/tab.js"></script>

</body>
</html>

css代码

*{
    margin:0;
    padding: 0;
    font-family: "Arial", "微软雅黑";
    font-size: 14px;
    line-height: 23px;
    font-weight: bold;
}
ul,li{list-style: none;}
li{float: left; margin-right: 20px;}
.div_bg{
    background-repeat:no-repeat;
    width:219px;
    height:290px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding: 50px 0 0 15px;
}
.div_bg div{
    clear: both; padding-top: 10px;}
.white{font-size:12px;
    color:#FFFFFF;
    padding-top:2px;
    cursor:pointer;
}
.white:hover{font-size:12px;
    color:#FFFFFF;
    padding-top:2px;
    cursor:pointer;
}
a {
    color: #333;text-decoration: none;line-height:24px;
}
a:hover {
    color: #cc0000;text-decoration: none;line-height:24px;
}
/* 鼠标移入的当前tab的样式 */
.bg{background-image:url(../images/menu1.gif);
    background-repeat:no-repeat;
    height:23px;
    width:47px;
    text-align:center;}
/* 其他tab的样式 */
.nobg{background-image:url(../images/menu2.gif);
    background-repeat:no-repeat;
    height:23px;
    width:47px;
    text-align:center;
}