您的位置：首页 > Web前端 > JQuery

基于JQuery1.4 Tab选项卡 一行代码轻松搞定

2011-09-25 19:00 776 查看
HMTL代码：



<div>


<b>标题1</b> <b>标题2</b> <b>标题3</b>


<p>标题1内容</p>


<p>标题2内容</p>


<p>标题3内容</p>


</div>


下来是必要的CSS代码：



.active{color:#F00}


接着就是关键的JQuery代码了：



$("div b:first").addClass("active");$("div p:gt(0)").hide();$("div b").click(function(){$(this).addClass("active").siblings("b").removeClass();$("div p:eq("+$(this).index()+")").show().siblings("p").hide();});


当然，根据HMTL代码的不同结构，JS代码可以写得更为简单，因为我有代码洁癖，所以能省的都省了。需要注意的是，如果需要一个页面应用多个TAB选项卡效果，就如同我博客的侧栏（这个使用1.3写的小插件，尚不完善。）的多个应用，可能还需再完善。这里只是给出了一个最简便的思路，就是利用index()！

<html><html>

<head>

<title>基于JQuery1.4 Tab选项卡 一行代码轻松搞定</title>

<style>

.active{color:#F00}

</style>

<script src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("jquery","1.4.1"); 

google.setOnLoadCallback(  

function(){ 

$(function(){

$("div b:first").addClass("active");

$("div p:gt(0)").hide();

$("div b").click(function(){

$(this).addClass("active").siblings("b").removeClass();

$("div p:eq("+$(this).index()+")").show().siblings("p").hide();

});

});

});

</script>

</head>

<body>

<div>

<b>标题1</b> <b>标题2</b> <b>标题3</b>

<p> <a href="http://www.taono.cn">淘宝导购站</a> </p>

<p> <a href="http://www.shinubi.net">史努比中文网</a> </p>

<p> <a href="http://www.pjzone.cn">中文酷博聚合</a> </p>

</div>

IE用户可能有必要<button onclick="window.location.reload()">点此刷新查看效果</button>。

</body>

</html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                jquery
                                                function
                                                div
                                                button
                                                css
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航