【Bootstrap】Bootstrap标签页效果_bootstrap好看的标签页-优快云博客

本文链接：https://blog.youkuaiyun.com/u011182346/article/details/88767481

本文介绍了一个使用HTML和JavaScript实现的Tab切换效果示例。通过简单的代码实现了不同内容面板之间的切换，当鼠标悬停在不同的标签上时，对应的内容会显示出来，而其他内容则会被隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图(1):

效果图(2):

效果图(3):

代码:

<!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">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Yy资源站</title>
    <link rel="stylesheet" href="bt/css/bootstrap.min.css">
    <link rel="stylesheet" href="bt/css/bootstrap-theme.min.css">
    <script src="bt/js/jquery.js"></script>
    <script src="bt/js/bootstrap.min.js"></script>
    <script src="bt/js/holder.js"></script>
    <style>
        .row{
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="">C语言</a>
        </li>
        <li class="">
            <a href="">PHP</a>
        </li>
        <li class="">
            <a href="">Java</a>
        </li>
    </ul>
    <div class="row">
        <p class="lead">
            1好你好fdsafdsa好你好你好你好你好你好你好你好你好你好你好你好你好你好
        </p>
    </div>
    
    <div class="row">
        <p class="lead">
            2好你好你好你好你好你好你好你好你fdsfdsafdsafdsafdsafdsaf好你好你好你好你好你好你好你好
        </p>
    </div>

    <div class="row">
        <p class="lead">
            3fsdfsdafdsafdsaaaaaaaaaaaaaaaaaafdsfd好你好你好你好你好你好你好你好你好你好你好
        </p>
    </div>
    
</div>
</body>
<script>
    //鼠标在哪里就把active赋值到那个li上面，并且将其他标签的class去掉。
    $('li').mouseenter(function(){
        $(this).addClass('active');
        $('li').not($(this)).removeClass('active');
    //找到鼠标在哪里，就将那个row显示，除他之外的隐藏
        idx=$(this).index('li');
        $('.row').eq(idx).show(500);
        $('.row').not($('.row').eq(idx)).hide();
    });
    //显示第一个row
    $('.row').eq(0).show(500);
</script>
</html>