导航标签页

最新推荐文章于 2023-05-15 17:28:41 发布

次次皮

最新推荐文章于 2023-05-15 17:28:41 发布

阅读量627

点赞数

分类专栏： bootstrap学习笔记

本文链接：https://blog.csdn.net/yszbrzdd/article/details/82714904

版权

bootstrap学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

代码段：

<!DOCTYPE html> 
<html>
     <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- 引入 Bootstrap --> 
        <script src="js/jquery/3.3.1/jquery.min.js"></script> 
        <link href="css/bootstrap/3.3.7/bootstrap.min.css" rel="stylesheet"> 
        <script src="js/bootstrap/3.3.7/bootstrap.min.js"></script>  
        <script src="js/holder.min.js"></script> 
        <style>
            .navs{
                display:none;
            }
        </style>
    </head>
    <body>
        <!--导航标签页-->
        <h1 class="page-header">导航标签页</h1>
        <div class="col-xs-2">
        <ul class="nav nav-pills nav-stacked"><!--.nav-tabs分页导航.nav-pills胶囊导航.nav-stacked-->
            <li class="active">
                <a href="">1</a>
            </li>
             <li>
                <a href="">2</a>
            </li>
             <li>
                <a href="">3</a>
            </li>
        </ul>
        </div>
        <div class="col-xs-10">
        <div class="row navs"><!--为了美观style中设置一下navs左右padding-->
            <img src="holder.js/700x100"></img>
            <p>11111111111111111111111111111111111111111111111</p>
        </div>
        <div class="row navs">
            <p>22222222222222222222222222222222222222222222222</p>
        </div>
        <div class="row navs">
            <p>33333333333333333333333333333333333333333333333</p>
        </div>
        </div>
    
    </body>
    <script>
            $('li').mouseenter(function(){
                $('this').addClass('active');
                $('li').not($(this)).removeClass('active');
                
                idx=$(this).index('li');
                $('.navs').eq(idx).stop().show(1000);/*.stop立刻结束当前动画*/
                $('.navs').not($('.navs').eq(idx)).stop().hide(100);
            });
            $('.navs').eq(0).show(100);
    </script>
</html>

显示效果：

导航标签页

次次皮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航标签页

代码段：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content=&qu
复制链接

扫一扫

专栏目录