Question

我有一个代码，其中包含选项卡内的选项卡。这是代码。

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


<html>

<head>
<script src="jquery.js"></script>
<script>
 $(document).ready(function(){
    //$("itab:nth-child(1)").addClass('default');

      $("itabbody itabs itab itabbody").replaceWith(function(event){
        {

            return "<itabbody2>"+$(this).html()+"</itabbody>";

        }
   }); 

      $("itabbody itabs itab.default").replaceWith(function(event){
        {

            return "<itab2 class=\"default\">"+$(this).html()+"</itab2>";

        }
   });

      $("itabbody itabs itab").replaceWith(function(event){
        {

            return "<itab2>"+$(this).html()+"</itab2>";

        }
   });   

      $("itabbody itabs").replaceWith(function(event){
        {

            return "<itabs2>"+$(this).html()+"</itabs2>";

        }
   }); 

   $("itab").click(function(event){
        {   
            //alert(event.pageY+" and "+$(this).offset().top);
            if(!(event.pageY>30+$(this).offset().top))
            { 
            $("itab2").removeClass('default');
            $(this).find("itab2:nth-child(1)").addClass('default');
            }
            $("itab").removeClass('default');
            $(this).addClass('default');


        }
   }); 


      $("itab2").click(function(event){
        {
            $("itab2").removeClass('default');
            $(this).addClass('default');

        }
   });

$("itab:nth-child(1)").addClass('default').find("itab2:nth-child(1)").addClass('default'); 

//$("itab itabbody").css('left',$(this).parent().offset().left); 


      $("itab itabbody").each(function(event){
        {
            $(this).css('left',($(this).parent().parent().find("itab:first").offset().left+'px'));
            //alert($(this).parent().parent().find("itab:first").offset().left+'px');
            //$(this).css('left','100 px');
        }
   });



 });
</script>

<style type="text/css">

itabbody {
    visibility:hidden;
    position:absolute;
    left:0px;
    height:500px;

}

itab.default itabbody {
    visibility:visible;
}

itab{
    float:left; 
}

itab a{
    display:block;
    width:200px;
} 



itabbody2 {
    visibility:hidden;
    position:absolute;
    left:0px;   
        height:500px;
}

itab2.default itabbody2{
    visibility:visible;
}

itab2{
    float:left; 
}

itab2 a{
    display:block;
    width:200px;
} 



</style>
</head>
<body>






<itabs>
<itab>
    <a href="#">itab1</a>
    <itabbody>
                    <itabs>

                    <itab>
                        <a href="#">Sub itab</a>
                        <itabbody>Content of First Sub itab 1</itabbody>
                    </itab>

                    <itab>
                        <a href="#">Sub itab 2</a>
                        <itabbody>Content First of Sub itab 2</itabbody>
                    </itab>

                    </itabs>    

    </itabbody>
</itab>

<itab>
    <a href="#">itab2</a>
    <itabbody>Content of itab2<br>sdfgdsgfdsg<br>dfdsfdsf</itabbody>
</itab>

<itab>
    <a href="#">itab3</a>
    <itabbody>Content of itab3
                        <itabs>

                    <itab>
                        <a href="#">Sub itab</a>
                        <itabbody>Content of Sub itab 1</itabbody>
                    </itab>

                    <itab>
                        <a href="#">Sub itab 2</a>
                        <itabbody>Content of Sub itab 2</itabbody>
                    </itab>

                    </itabs>    


    </itabbody>
</itab>

</itabs>

</body>


</html>

我想设计这些标签..你可以帮帮我..？

Answer 1

抛弃<itab>并使用<li>然后使用CSS来设置它们的样式。

如何在标签内设计标签？

1 个答案: