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”>

<head>

<title>TAB滑动选项卡</title>

* {

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>

<a href=”#” class=”ck”>JAVA介绍</a>

<a href=”#”>PHP介绍</a>

<a href=”#”>C语言介绍</a>

</div>

<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>

$(“#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实现选项卡功能

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发