Jquery实现选项卡功能

网站web前端开发工程师 重庆前端开发工程师招聘 web前端gis开发工程师

代码片段 1

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>TAB滑动选项卡</title>
    <meta http-equiv=”keywords” content=”关键词,关键词” />
    <meta http-equiv=”description” content=”描述说明” />
    <script src=”http://code.jquery.com/jquery-1.7.2.js” type=”text/javascript”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        #tm_wrapper {
            margin: 15px auto;
            width: 960px;
            height: 520px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 5px 5px 10px #ccc;
        }
        #tm_button {
            height: 62px;
            background: #f1f1f1;
            border-bottom: 1px solid #ccc;
            border-radius: 10px 10px 0px 0px;
        }
        #tm_button a {
            display: block;
            text-decoration: none;
            color: #333;
            font-family: “微软雅黑”;
            font-size: 12px;
            float: left;
            margin-top: 13px;
            margin-left: 15px;
            height: 35px;
            width: 150px;
            line-height: 35px;
            text-align: center;
        }
        #tm_button a.ck {
            border-radius: 5px;
            background: #42b90f;
            color: #fff;
            font-weight: 700;
        }
        #tm_content {
            height: 458px;
            border-radius: 0px 0px 10px 10px;
        }
        #tm_content div {
            display: none;
            padding: 10px;
            font-size: 14px;
            line-height: 26px;
            font-family: “微软雅黑”;
        }
    </style>
</head>
<body>
    <div id=”tm_wrapper”>
        <div id=”tm_button”>
            <a href=”#” class=”ck”>JAVA介绍</a>
            <a href=”#”>PHP介绍</a>
            <a href=”#”>C语言介绍</a>
            <a href=”#”>C#介绍</a>
        </div>
        <div id=”tm_content”>
            <div style=”display:block;”>
                <p>JAVA是一种可以撰写跨平台应用软件的面向对象的程序设计语言,由升阳(Sun Microsystems)公司的詹姆斯·高斯林(James
                    Gosling)等人于1990年代初开发。它最初被命名为Oak,目标设定在家用电器等小型系统的编程语言,来解决诸如电视机、电话、闹钟、烤面包机等家用电器的控制和通讯问题。由于这些智能化家电的市场需求没有预期的高,Sun放弃了该项计划。就在Oak几近失败之时,随着互联网的发展,Sun看到了Oak在计算机网络上的广阔应用前景,于是改造了Oak,在1995年5月23日以“Java”的名称正式发布了。Java伴随着互联网的迅猛发展而发展,逐渐成为重要的网络编程语言。Oracle收购Sun后Java前途未卜。</p>
            </div>
            <div>
                <p>PHP,一个嵌套的缩写名称,是英文超级文本预处理语言(PHP:Hypertext Preprocessor)的缩写。PHP 是一种 HTML
                    内嵌式的语言,PHP与微软的ASP颇有几分相似,都是一种在服务器端执行的嵌入HTML文档的脚本语言,语言的风格有类似于C语言,现在被很多的网站编程人员广泛的运用。PHP 独特的语法混合了C、Java、Perl 以及 PHP
                    自创新的语法。它可以比 CGI 或者 Perl 更快速的执行动态网页。</p>
            </div>
            <div>
                <p>C语言,是一种通用的、过程式的编程语言,广泛用于系统与应用软件的开发。具有高效、灵活、功能丰富、表达力强和较高的移植性等特点,在程序员中备受青睐。最近25年是使用最为广泛的编程语言。C语言是由UNIX的研制者丹尼斯·里奇(Dennis
                    Ritchie)于1970年 由 肯·汤普逊(Ken Thompson)所研制出的B语言的基础上发展和完善起来的。目前,C语言编译器普遍存在于各种不同的操作系统中,例如UNIX、MS-DOS、Microsoft
                    Windows及Linux等。C语言的设计影响了许多后来的编程语言,例如C++、Objective-C、Java、C#等。</p>
            </div>
            <div>
                <p>C Sharp,是微软为NET Framework量身订做,于2000年6月发布的一种面向对象编程语言。C SHARP拥有C/C++的强大功能以及Visual
                    Basic简易使用的特性,是第一个组件导向(Component-oriented)的程序语言,和C++与Java一样亦为对象导向(object-oriented)程序语言,但是C SHARP程序只能在Windows下运行。</p>
            </div>
        </div>
    </div>
    <script type=”text/javascript”>
        $(“#tm_button a”).hover(function () {
            $(“#tm_button a”).removeClass(“ck”);
            $(this).addClass(“ck”);
            var div = {};
            div = $(“#tm_content div”);
            for (var i = 0; i < div.length; i++) {
                if (i == $(this).index()) {
                    $(“#tm_content div”).eq(i).show(“fast”);
                } else {
                    $(“#tm_content div”).eq(i).hide(“fast”);
                }
            }
        });
    </script>
</body>
</html>

siblings()简化 $(“#tm_button a”).hover(function(){
$(this).addClass(“ck”).siblings().removeClass(“ck”);
$(“#tm_content div”).eq($(this).index()).show(“fast”).siblings().hide(“fast”);
});

前端开发工程师要求 武汉前端开发工程师工资 前端开发工程师职责

» 本文来自:前端开发者 » 《Jquery实现选项卡功能》
» 本文链接地址:https://www.rokub.com/6034.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!