用jquery写了个选项卡,当作一个笔记吧。

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   

<meta name="viewport" content="width=1024" />

<meta name="description" content="" />

<meta name="Keywords" content="" />

<title>Demo</title>

<style type="text/css">

.left{float:left;}

.right{float:right;}

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}

body{margin:0; padding:0; width:100%;}

ul{margin:0; padding:0;}

li{list-style:none;}

.wp {width:1000px; margin:0 auto;position:relative;}

.slidebox{width:150px; height:200px; border:1px solid #000; margin-left:20px;}

.slidebox ul li{margin-top:10px;}

.slidebox {position:relative;}

.slidebox ul{position:absolute; left:0; top:0; z-index:1; display:none;}

.heigh_tp{right:10px; top:10px;}

.heigh_tp span{width:10px; height:10px; background:blue; display:inline-block; border-radius:50%; cursor:pointer; position:relative; z-index:2;}

.heigh_tp .current{background:red;}

</style>



</head>

<body>



<div class="slidebox">

  <div class="heigh_tp">

  </div>

    <ul>

        <li>javascript程序设计1</li>

        <li>javascript程序设计1</li>

        <li>javascript程序设计1</li>

        <li>javascript程序设计1</li>

    </ul>

    <ul>

        <li>javascript程序设计2</li>

        <li>javascript程序设计2</li>

        <li>javascript程序设计2</li>

        <li>javascript程序设计2</li>

    </ul>

    <ul>

        <li>javascript程序设计3</li>

        <li>javascript程序设计3</li>

        <li>javascript程序设计3</li>

        <li>javascript程序设计3</li>

    </ul>

</div>

<div class="slidebox">

  <div class="heigh_tp">

  </div>

    <ul>

        <li>javascript程序设计1</li>

        <li>javascript程序设计1</li>

        <li>javascript程序设计1</li>

        <li>javascript程序设计1</li>

    </ul>

    <ul>

        <li>javascript程序设计2</li>

        <li>javascript程序设计2</li>

        <li>javascript程序设计2</li>

        <li>javascript程序设计2</li>

    </ul>

    <ul>

        <li>javascript程序设计3</li>

        <li>javascript程序设计3</li>

        <li>javascript程序设计3</li>

        <li>javascript程序设计3</li>

    </ul>

</div>









<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    $(".slidebox").each(function(){

        var ulLeng=$("ul",this).size();

        for(var i=0;i<ulLeng;i++){

            $(".heigh_tp",this).append("<span></span>")     //算是动态创建吧..

        };

        var index;

        var parter;

        var parterpar;

        $(".heigh_tp span",this).click(function(){

            var curIndex=$(this).index();

            if(index==curIndex){return false;}               //解决一个在当前选项仍会执行动画效果的问题

            index=$(this).index();

        

             parter=$(this).parent();

             parterpar=$(this).parent().parent();

            showtab(index);

            

        }).eq(0).click();

        function showtab(index){

            $("span",parter).removeClass("current");

            $("span",parter).eq(index).addClass("current");

            $("ul",parterpar).fadeOut();

            $("ul",parterpar).eq(index).fadeIn();

        }

    })

//写完发现了几个问题, 第一个是each()函数的用法, 还有关于本文中的ul的自动分页还没有构思好,  这里面的涉及到了个变量作用域的问题等等,求各位大牛能给小弟些建议和指正...

</script>

</body>

</html>

经过几个月的挣扎, 作为一个刚没有任何底层语言基础,没有任何编程经验的前端程序员,深知这条路难走, 但是我不会放弃的。哈哈哈哈哈。

 

你可能感兴趣的:(jquery)