tab标签切换(无炫效果,简单的显示隐藏)

从最简单的效果开始写起,一个简单的JQ写出tab切换效果,很静态,没有任何的轮转特效,单纯的点击标签显示区域块。

附上代码:

HTML:

<div class="wrapper">
    <div class="tab">
        <div class="tabtt">
            <ul class="clearfix">
                <li class="current">
                    <a href="javasrcipt:;">标题1</a>
                </li>
                <li>
                    <a href="javasrcipt:;">标题2</a>
                </li>
                <li>
                    <a href="javasrcipt:;">标题3</a>
                </li>
            </ul>
        </div>
        <div class="tabcon">
            <div class="con" style="display: block;">
                我是内容我是内容,对应标题1的内容。这就是个内容介绍。我是内容我是内容,对应标题1的内容。这就是个内容介绍。我是内容我是内容,对应标题1的内容。这就是个内容介绍。我是内容我是内容,对应标题1的内容。这就是个内容介绍。我是内容我是内容,对应标题1的内容。这就是个内容介绍。
            </div>
            <div class="con">
                我是内容我是内容,对应标题2的内容。这就是个内容介绍。我是内容我是内容,对应标题2的内容。这就是个内容介绍。我是内容我是内容,对应标题2的内容。这就是个内容介绍。我是内容我是内容,对应标题2的内容。这就是个内容介绍。我是内容我是内容,对应标题2的内容。这就是个内容介绍。
            </div>
            <div class="con">
                我是内容我是内容,对应标题3的内容。这就是个内容介绍。我是内容我是内容,对应标题3的内容。这就是个内容介绍。我是内容我是内容,对应标题3的内容。这就是个内容介绍。我是内容我是内容,对应标题3的内容。这就是个内容介绍。我是内容我是内容,对应标题3的内容。这就是个内容介绍。
            </div>
        </div>
    </div>
</div>

CSS如下:

<style type="text/css">

a{color: #000;}
.tab{
    position: relative;
    width: 300px;
    margin: 20px auto;
}
.tabtt{
    position: relative;
    z-index: 50;
}
.tabtt li{
    float: left;
    margin-right: 5px;
}
.tabtt li a{
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    border:1px solid #d3d3d3;
    background: #eee;
    color: #999;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}
.tabtt li a:hover,.tabtt li.current a{
    color: #000;
    background: #fff;
    border-bottom:1px solid #fff;
}
.tabcon{
    position: relative;
    padding: 10px;
    margin-top: -1px;
    border:1px solid #d3d3d3;
}
.con{ display: none;}
</style>

P.S.每个人都有自己的公用的CSS,所以一些的公用的CSS 在这里没有体现,需要自己填写。例如li的list-style属性等。

最讨人喜欢的JQ来了:

<script type="text/javascript">
    $(function(){
        $(".tabtt ul li").click(function(){
            $(this).addClass("current").siblings().removeClass("current");
            $(".con").hide().eq($(".tabtt ul li").index(this)).show();
        });
    });
</script>

一向记不住语法的我Mark一下,说不定这次就记住了呢。(*^__^*)

时间: 2024-10-23 21:47:11

tab标签切换(无炫效果,简单的显示隐藏)的相关文章

搞定tab标签切换效果

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>搞定tab标签切换效果</title><style>*{ margin:0; padding:0;list-style: none;}body {font:12px/1.5 Tahoma;}#big{border: 1px solid b

纵向tab标签切换效果

html   css  js直接用就好 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纵向tab标签切换效果</title> <style> *{ margin:0; padding:0;list-style: none;} body {font:12px/1.5 Tahoma;} #out

jQuery蓝色修边tab标签切换

jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换流畅,切换过程带有渐变效果素材免费下载. http://www.huiyi8.com/sc/6954.html

CSS+JS实现tab标签切换

实现tab标签切换比较简单,下面先看看我实现的效果: 我主要实现了: 1.tab之间的相互切换: 2.显示选中的tab 下面看看实现代码: css: html,body,div{ font-size: 12px; font-family:"Arial"; } .tab-ui{ width: 400px; height: 300px; position: relative; } .tab-title{ border-top-right-radius:8px; float: left; b

每天一个JavaScript实例-tab标签切换

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-tab标签切换</title> <style> .tabcontainer{ padding:5px; width:500px; marg

很好用的Tab标签切换功能,延迟Tab切换。

一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊,其实你不这样做,也无伤大雅,但是作为前端的工程师,我们可以为用户做到更好.想想如果一个网页上,有很多标签,而用户鼠标在不经意间快速的滑动了一下,如果tab标签的切换不经过特殊的处理的话,标签所对应的内容会一同切换,甚至还会想服务器请求内容,增加服务器开销,很显然这一行为不是用户想要的,我们完全可以

网页中tab标签切换分别用jquery和javascript源码实现

//HTML布局<ul id="tabTitle"> <li class="active">HTML5</li> <li>PHP</li> <li>Java</li> </ul> <div id="div1" style="display: block"> HTML5 </div> <div id=&q

纯CSS3实现动画不规则的tab标签切换代码

<!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-Typ

JQ 简单动画显示隐藏效果

一.概括 jq的显示隐藏动画总共有: 普通显示隐藏效果主要用了hide.show.toggle 淡入淡出主要用到了fadeIn.fadeOut.fadeToggle 滑动效果主要用了slideDown.slideUp.slideToggle 其中各效果用到的toggle都是其他两个属性的切换 二.实例 普通显示隐藏效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT