JQ的插件-自己写个小插件

最新推荐文章于 2024-07-08 18:01:35 发布

dibengcheng6179

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量75

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/super-zhen/p/3758073.html

版权

通过JQ插件，实现选项卡切换，同 http://www.cnblogs.com/super-zhen/p/3756899.html

两个文件：html+js

HTML代码

<!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></title>
<style>
#div1 .cur{background:#FFC;}
#div1 div{width: 100px; height: 100px; border:1px solid #ccc; display: none;}
</style>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="mycode_js.js"></script> 
<script type="text/javascript">

$(function(){

    $("#div1").myjs();
    
})

</script>
<body>
<div id="div1">
    <input type="button" value="1" class="cur" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display: block">1111</div>
    <div>2222</div>
    <div>3333</div>
</div>
</body>
</html>

mycode_js.js

// JavaScript Document

(function($){
    
    $.fn.myjs=function(){
        
        var This=this;
        
        $(this).find('input').mouseover(function(){
        $(This).find('input').attr('class','');
        $(This).find('div').css('display','none');
        $(this).attr('class','cur');
        $(This).find('div').eq($(this).index()).css('display','block');
        })    
    }

})(jQuery);

转载于:https://www.cnblogs.com/super-zhen/p/3758073.html

dibengcheng6179

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ的插件-自己写个小插件

通过JQ插件，实现选项卡切换，同 http://www.cnblogs.com/super-zhen/p/3756899.html 两个文件：html+jsHTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...
复制链接

扫一扫