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

通过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">1111div>
    <div>2222div>
    <div>3333div>
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

你可能感兴趣的:(xhtml,javascript)