tab 标签页（2）

来源：互联网发布：查看图片分辨率软件编辑：程序博客网时间：2024/06/11 19:56
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>tab标签页</title><script src="jQuery/jquery-2.1.1.min.js"></script><style>*{padding:0;margin:0;}body{margin-left:50px;margin-top:50px;}ul{list-style-type:none;}#ul{height:30px;margin-bottom:10px;}#ul li{height:30px;line-height:30px;padding:0 15px;border:1px solid #abcdef;float:left;margin-right:5px;cursor:pointer;}#ul li.current{background:#abcdef;}#content div{width:260px;height:250px;border:1px solid #abcdef;display:none;}#content div.show{display:block;}</style></head><body><ul id="ul">    <li class="current">javascript</li>        <li>jquery</li>        <li>php</li>    </ul>    <div id="content" >    <div class="show">JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。于1995年由Netscape公司的Brendan Eich首次设计实现而成。由于Netscape公司与Sun公司合作，Netscape高层希望它看上去能够像Java，因此取名为JavaScript。        </div>        <div>Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。        </div>        <div> PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。        </div>    </div>        <script>var timeout;$(document).ready(function(){$("#ul li").each(function(index){var timeout;var i=$(this);i.mouseover(function(){//滑动门都要设置一个延迟时间，避免用户疯狂移动鼠标，导致服务器崩溃，这个很重要 timeout=setTimeout(function(){//1.点击li的时候要切换样式i.addClass('current').siblings().removeClass('current');//2.根据li的索引值，来确定哪个div显示，其他div隐藏$('#content>div').eq(i.index()).show().siblings().hide();},320);});i.mouseout(function(){clearTimeout(timeout);});});});</script></body></html>
0 0