学习JQUERY,写的选择页功能。

最新推荐文章于 2023-03-27 09:22:26 发布

啵呗

最新推荐文章于 2023-03-27 09:22:26 发布

阅读量414

点赞数

分类专栏：个人心得文章标签： jquery menu class attributes tabs div

本文链接：https://blog.csdn.net/bobay/article/details/7869933

版权

个人心得专栏收录该内容

26 篇文章 1 订阅

订阅专栏

和其它的区别是用了.siblings()这个函数，不知道功能有什么影响。

HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Menu Navigator</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.7.2/jquery.min.js"></script>
    </head>
    <body>
     <div class="tabbed-menu">
        <ul class="tabs">
        	<li id="tab_menu_1" class="selected">tab_menu_1</li>
        	<li id="tab_menu_2">tab_menu_2</li>
        	<li id="tab_menu_3">tab_menu_3</li>
            <li id="tab_menu_4">tab_menu_4</li>
        </ul>
        <div class="content">
        	<div class="page" >my text1</div>
        	<div class="page" style="display:none;">my text2</div>
        	<div class="page" style="display:none;">my text3</div>
            <div class="page" style="display:none;">my text4</div>
        </div>
     </div>
    </body>
</html>

CSS代码：

/*  This div class is the container for our menu.
                It defines attributes for everything inside. */
            div.tabbed-menu {
                font-family: "Helvetica";
                font-size: 15px;
                width: 600px;
            }

            /*  This ul class defines how your menu options
                will be arranged and also gives us a nice 
                dividing line between the menu and the content. */
            ul.tabs {
                text-align: center;
                list-style: none;
                position: relative;
                margin: 0;
                padding: 0;
                line-height: 26px;
                color: #0088CC;
                border-bottom: 1px solid #DDDDDD;
            }

            /*  This defines the look of the individual tabs of 
                your menu when they are contained in a tabs class ul */
            ul.tabs li {
                margin-bottom: -1px;
                padding: 3px 10px 0 10px;
                border: 1px solid #DDDDDD;
                background: #EFEFEF;
                
                /*  inline-block tells the browser to arrange the list
                    elements in a line rather than each element on its
                    own line. */
                display: inline-block;
                
                /* The attributes here round the top left
                    and right corners of the tabs. */
                border-top-left-radius: 6px; 
                border-top-right-radius: 6px;
            }
            /* This defines what a tab should look like when selected */
            ul.tabs li.selected {
                background: #FFF;
                border-bottom-color: transparent;
            }
            /* This defines how a tab looks when your mouse hovers above it */
            ul.tabs li:hover {
                color: #333333;
                cursor: pointer;
                background: #FFFFFF;
            }

            /*  This centers all of the text within a page element */
            div.page {
                text-align: center;
            }
            /*  This overrides the text centering we defined above if
                the text is within a list and also tells your browser
                not to put bullet points next to the text. */
            div.page li {
                text-align: left;
                list-style-type: none;
            }

JQUERY代码：

$(document).ready(function(){
                $('.tabs li').mouseover(function(){
                    if(!$(this).hasClass('selected')){
                        $(this).addClass('selected');
                        $(this).siblings().removeClass('selected');
                        var menuNum = parseInt($(this).attr('id').substr(9),10) - 1;
                        var $contentDiv = $(".content div:eq(" + menuNum + ")");
                        $contentDiv.css('display','block');
                        $contentDiv.siblings().css('display','none');
                    }
                });
            });

啵呗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习JQUERY,写的选择页功能。

和其它的区别是用了.siblings()这个函数，不知道功能有什么影响。HTML 代码： Menu Navigator <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
复制链接

扫一扫