zoukankan      html  css  js  c++  java
  • 选项卡的功能

    <!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; 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; 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(){
          $(this).addClass("ck").siblings().removeClass("ck");
          $("#tm_content div").eq($(this).index()).show("fast").siblings().hide("fast");
    });
    <!--第二种方法使用-->

                    /*$("#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>

  • 相关阅读:
    微信公众号迁移配置注意点
    关于memcache 命令查看和 Telnet
    centOS 安装(光安装 和 u盘安装)
    CentOS删除自带的java,安装新java
    ubuntu常用命令
    ubuntu 的挂起与休眠
    saiku应用的调试
    数据挖掘123
    unbutu 安装java教程
    workbench的schema讲解一:(维度dimension设置的基本内容)
  • 原文地址:https://www.cnblogs.com/BoYu045535/p/3758855.html
Copyright © 2011-2022 走看看