tab 简单的tab

        <div class="tab">
            <ul>
                <li data-index = "1">手机

                </li>
                <li data-index = "2">电脑    </li>
                <li data-index = "3">pad    </li>
                <li data-index = "4">配件    </li>
            </ul>
        </div>

<div class="content" id="content">
         <div class="tab-div" data-index=‘1‘>
            手机
        </div>
            <div class="tab-div" data-index=‘2‘>
            电脑
        </div>
            <div class="tab-div" data-index=‘3‘>
            pad
        </div>
            <div class="tab-div" data-index=‘4‘>
            配件
        </div>
</div>

采用ul li 和div结合的方式实现 上面是html

.tab ul li{
    list-style: none;
    float: left;
width: 124px;
left: -38px;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
    border-bottom: 1px #000000 solid;
    position: relative;
    cursor: pointer;
    text-align: center;

}
.botline{
    border-bottom: 1px #FFFFFF solid !important;
}
.tab-div{
    width: 500px;
    height: 500px;
border-right: 1px #000000 solid;
border-left: 1px #000000 solid;
border-bottom: 1px #000000 solid;
left: 0;
    position: absolute;
    margin-top: 20px;
}

.tab ul li ul div{
    width:100px;
    height: 100px;
    position:  absolute;
    border: 1px solid ;
}
.content:first-child{
    display: block;
}
.content div:not(:first-child){
    display: none;
}

上面是css内容

$(‘.tab ul li‘).mouseover(function(){
    var div=document.getElementById(‘content‘).getElementsByTagName(‘div‘);
//$(this).siblings().css(‘border-bottom‘,‘1px #000000 solid‘);
$(this).addClass(‘botline‘).siblings().removeClass(‘botline‘)
    var index=parseInt($(this).attr(‘data-index‘));

    var divcount=$(‘.content‘).find(‘div‘).length;

    for(var i=0;i<divcount;i++)
    {
        div[i].style.display=‘none‘;

        if(index==parseInt(div[i].getAttribute(‘data-index‘)))
        div[i].style.display=‘block‘;
    }
})

上面是js文件内容

效果图

时间: 2024-10-04 11:39:24

tab 简单的tab的相关文章

用angularjs做简单的tab切换

用angularjs做简单的tab切换: 页面部分 <div> <div id="tabs" ng-controller="TabsCtrl"> <ul> <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.t

使用jQuery实现简单的tab框

html代码 <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>实现简单的tab框</title> <link rel="stylesheet" href="

简单的tab标签

能力有限,先写个简单的tab,今年算是正式军js大军了,买了各种书看呀,看的各种凌乱啊,先储备一下,以后还会继续回来优化,进阶的,谁看到此篇文章也可以留言贴代码,豪一下 <!DOCTYPE html> <html><head> <style> *{margin:0;padding: 0;} body{font-size: 62.5%;padding:20em;} p { margin-left:10px; } .container{width: 30em;h

jquery简单的tab切换特效插件jquery-tab demo代码下载

原文:jquery简单的tab切换特效插件jquery-tab demo代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463496178688.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

Jquery 简单的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-

DIV+CSS 样式简单布局Tab 切换

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../JS/JQuery/jquery-1.9.1.js" type="text/javascript"></script> <style type="

react简单的tab切换 (styled-components)

其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 内容模块. this.state = { current: 0, cities:['香港','北京','上海','台北'], content:[{ number: '13866666666', email: '[email protected], time: 'test123', },{ numb

Vue之tab简单切换实现

简单实现过程: 通过v-for实现tab页签,通过@click实现页签切换,通过:class实现绑定当前页,tab切换主要依靠组件component实现,每个页签切换时,不想让改变页签内容,可以用keep-alive实现.具体代码如下: <template> <div id="app"> <div class="radio-wrap"> <div class="radio-group" v-model=&

简单实现tab标签页切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style>