TAB(JQUERY)
博客专区 > 0000001 的博客 > 博客详情
TAB(JQUERY)
0000001 发表于4年前
TAB(JQUERY)
  • 发表于 4年前
  • 阅读 31
  • 收藏 1
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 方便扩展。整站都可以使用哦

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>tab</title>

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

<style type="text/css">

body{ font:12px/1.5 Verdana,Geneva,Arial,Helvetica,sans-serif;}

body,h1,h2,h3,h4,h5,h6,hr,p,dl,th,dt,dd,ul,ol,li,form,fieldset,legend,button,input,textarea{ outline:medium none; padding:0;margin:0; }

ul,ol{ list-style:none; }

a{ text-decoration:none; }

img{ border:none; display:block; }

em,i{ font-style:normal;}

s{ display:inline-block; overflow: hidden; }

input{ vertical-align:middle; }

h2,h3,h4,h5{ font-size:14px;}

.tabs-box

{

    /*导航容器定义*/

    width:500px; height:300px; 

}

.tabs li

{

    /*默认标签样式*/

    float:left; width:100px; height:24px; line-height:24px; 

}

.tabs li.selected

{

    /*激活的标签样式*/

    background:#f00; 

}

.tabs-panel

{

    /*默认的显示区域样式*/

   display:none; width:300px; height:200px; border:1px solid #ccc; backgrond:#fff; 

}

.tabs-show

{

    display: block;

}

</style>


<script type="text/javascript">

$(function() {

        $(".tabs").find("li").mouseover(function(e) {

            if (e.target == this) {

                var tabs = $(this).parent().children("li");

                var panels = $(this).parent().parent().children("div");

                var index = $.inArray(this, tabs);

                if (panels.eq(index)[0]) {

                    tabs.removeClass("selected")

                        .eq(index).addClass("selected");

                    panels.removeClass("tabs-show")

                        .eq(index).addClass("tabs-show");

                }

            }

        });

    });

</script>

</head>

<body>

<div>

<ul>

<li>

论坛新帖

</li>

<li>

最新博文

</li>

<li>

最新

</li>

</ul>

<div class="tabs-panel tabs-show">

--111这里调用最新论坛文章--

</div>

<div>

--2222这里调用最新博客文章-

</div>

<div>

-3333-这里调用最新论坛文章--

</div>

</div>

</body>

</html>


标签: Tab tab
共有 人打赏支持
粉丝 35
博文 140
码字总数 46256
×
0000001
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: