JQuery焦点Table

.prod_description_sizechart table{margin-bottom:;width:992px;max-width:none;border-collapse:collapse;background-color:transparent;table-layout:fixed;border-spacing:;}

.table-bordered{border:1px solid #ddd;border-left:;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}

.table{margin-bottom:20px;width:100%;table-layout:fixed;}

tbody{display:table-row-group;border-color:inherit;vertical-align:middle;}

tr{display:table-row;border-color:inherit;vertical-align:inherit;}

table{margin-bottom:;width:992px;max-width:none;border-collapse:collapse;background-color:transparent;table-layout:fixed;border-spacing:;}

.prod_description_sizechart table td,.prod_description_sizechart table th{text-align:center;word-wrap:break-word;}

.table-bordered th,.table-bordered td{border-left:1px solid #ddd;}

.table-bordered th,.table-bordered td{border-left:1px solid #ddd;}

.table th,.table td{padding:8px;width:120px;border-top:1px solid #ddd;vertical-align:top;text-align:center;word-wrap:break-word;font-size:12px;line-height:20px;}

.prod_description_sizechart .prod_size em{margin:0 4px;font-style:normal;font-size:16px;}

ul,li{margin:;padding:;list-style:none;}

#p-li{margin:0 auto;margin-top:10px;width:630px;}

#p-li div{clear:both;display:none;}

li{float:left;margin-right:2px;padding:10px;background:#b9bec2;color:#FFF;cursor:default;}

.tagIn,#p-li .conIn{display:block;color:#FFF;}

.tagIn{background:#cb2027;}

.mouseover{background:#cb2027;color:#fff;}

Css Code

<div id="p-li">

    <ul>

        <li class="tagIn level-top"> Inches </li>

        <li class="level-top"> Centimeters </li>

    </ul>

    <div class="conIn level-content">

        <table class="table table-bordered">

        <tbody>

        <tr>

            <th>

                Size

            </th>

            <th>

                Bust

            </th>

            <th>

                Waist

            </th>

            <th>

                Hips

            </th>

            <th>

                Hollow to Floor

            </th>

        </tr>

        <tr>

            <td class="prod_size litb-hover" data-orig="2">

                2

            </td>

            <td class="prod_size" data-orig="83">

                32

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="65">

                25

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="91">

                35

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="147">

                57

                <em>¾</em>

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="4">

                4

            </td>

            <td class="prod_size" data-orig="85">

                33

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="68">

                26

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="93">

                36

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="147">

                57

                <em>¾</em>

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="6">

                6

            </td>

            <td class="prod_size" data-orig="88">

                34

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="70">

                27

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="96">

                37

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="150">

                59

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="8">

                8

            </td>

            <td class="prod_size" data-orig="90">

                35

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="72">

                28

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="98">

                38

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="150">

                59

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="10">

                10

            </td>

            <td class="prod_size" data-orig="93">

                36

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="75">

                29

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="101">

                39

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="152">

                59

                <em>¾</em>

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="12">

                12

            </td>

            <td class="prod_size" data-orig="97">

                38

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="79">

                31

            </td>

            <td class="prod_size" data-orig="105">

                41

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="152">

                59

                <em>¾</em>

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="14">

                14

            </td>

            <td class="prod_size" data-orig="100">

                39

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="83">

                32

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="109">

                43

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="16">

                16

            </td>

            <td class="prod_size" data-orig="104">

                41

            </td>

            <td class="prod_size" data-orig="86">

                33

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="112">

                44

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="16w">

                16w

            </td>

            <td class="prod_size" data-orig="109">

                43

            </td>

            <td class="prod_size" data-orig="92">

                36

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="116">

                45

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="18w">

                18w

            </td>

            <td class="prod_size" data-orig="114">

                45

            </td>

            <td class="prod_size" data-orig="98">

                38

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="121">

                47

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="20w">

                20w

            </td>

            <td class="prod_size" data-orig="119">

                46

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="104">

                41

            </td>

            <td class="prod_size" data-orig="126">

                49

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="22w">

                22w

            </td>

            <td class="prod_size" data-orig="124">

                48

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="109">

                43

            </td>

            <td class="prod_size" data-orig="131">

                51

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="24w">

                24w

            </td>

            <td class="prod_size" data-orig="130">

                51

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="115">

                45

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="136">

                53

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="26w">

                26w

            </td>

            <td class="prod_size" data-orig="135">

                53

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="121">

                47

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="141">

                55

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        </tbody>

        </table>

    </div>

    <div class="level-content">

        <table class="table table-bordered" data-chart-unit="" data-unit="[&quot;&quot;,&quot;cm&quot;,&quot;cm&quot;,&quot;cm&quot;,&quot;cm&quot;]">

        <tbody>

        <tr>

            <th>

                Size

            </th>

            <th>

                Bust

            </th>

            <th>

                Waist

            </th>

            <th class="litb-hover">

                Hips

            </th>

            <th>

                Hollow to Floor

            </th>

        </tr>

        <tr>

            <td class="prod_size" data-orig="2">

                2

            </td>

            <td class="prod_size" data-orig="83">

                83

            </td>

            <td class="prod_size" data-orig="65">

                65

            </td>

            <td class="prod_size" data-orig="91">

                91

            </td>

            <td class="prod_size" data-orig="147">

                147

            </td>

        </tr>

        <tr>

            <td class="prod_size litb-hover" data-orig="4">

                4

            </td>

            <td class="prod_size" data-orig="85">

                85

            </td>

            <td class="prod_size" data-orig="68">

                68

            </td>

            <td class="prod_size" data-orig="93">

                93

            </td>

            <td class="prod_size" data-orig="147">

                147

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="6">

                6

            </td>

            <td class="prod_size" data-orig="88">

                88

            </td>

            <td class="prod_size" data-orig="70">

                70

            </td>

            <td class="prod_size" data-orig="96">

                96

            </td>

            <td class="prod_size" data-orig="150">

                150

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="8">

                8

            </td>

            <td class="prod_size" data-orig="90">

                90

            </td>

            <td class="prod_size" data-orig="72">

                72

            </td>

            <td class="prod_size" data-orig="98">

                98

            </td>

            <td class="prod_size" data-orig="150">

                150

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="10">

                10

            </td>

            <td class="prod_size" data-orig="93">

                93

            </td>

            <td class="prod_size" data-orig="75">

                75

            </td>

            <td class="prod_size" data-orig="101">

                101

            </td>

            <td class="prod_size" data-orig="152">

                152

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="12">

                12

            </td>

            <td class="prod_size" data-orig="97">

                97

            </td>

            <td class="prod_size" data-orig="79">

                79

            </td>

            <td class="prod_size" data-orig="105">

                105

            </td>

            <td class="prod_size" data-orig="152">

                152

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="14">

                14

            </td>

            <td class="prod_size" data-orig="100">

                100

            </td>

            <td class="prod_size" data-orig="83">

                83

            </td>

            <td class="prod_size" data-orig="109">

                109

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="16">

                16

            </td>

            <td class="prod_size" data-orig="104">

                104

            </td>

            <td class="prod_size" data-orig="86">

                86

            </td>

            <td class="prod_size" data-orig="112">

                112

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="16w">

                16w

            </td>

            <td class="prod_size" data-orig="109">

                109

            </td>

            <td class="prod_size" data-orig="92">

                92

            </td>

            <td class="prod_size" data-orig="116">

                116

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="18w">

                18w

            </td>

            <td class="prod_size" data-orig="114">

                114

            </td>

            <td class="prod_size" data-orig="98">

                98

            </td>

            <td class="prod_size" data-orig="121">

                121

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="20w">

                20w

            </td>

            <td class="prod_size" data-orig="119">

                119

            </td>

            <td class="prod_size" data-orig="104">

                104

            </td>

            <td class="prod_size" data-orig="126">

                126

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="22w">

                22w

            </td>

            <td class="prod_size" data-orig="124">

                124

            </td>

            <td class="prod_size" data-orig="109">

                109

            </td>

            <td class="prod_size" data-orig="131">

                131

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="24w">

                24w

            </td>

            <td class="prod_size" data-orig="130">

                130

            </td>

            <td class="prod_size" data-orig="115">

                115

            </td>

            <td class="prod_size" data-orig="136">

                136

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="26w">

                26w

            </td>

            <td class="prod_size" data-orig="135">

                135

            </td>

            <td class="prod_size" data-orig="121">

                121

            </td>

            <td class="prod_size" data-orig="141">

                141

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        </tbody>

        </table>

    </div>

</div>

Html Code

 jQuery(document).ready(function(e) {

     jQuery("#p-li li").each(function(index, element) {

         var thisLi = jQuery(this);

         thisLi.mouseover(function() {

             //alert(index);

             jQuery(".tagIn").removeClass("tagIn");

             jQuery(".conIn").removeClass("conIn");

             jQuery(this).addClass("tagIn");

             jQuery("#p-li div").eq(index).addClass("conIn");

             //圆角部分

         });

     });

     jQuery(".level-top").corner("top 8px");

     //jQuery(".level-content").corner("buttom");

     jQuery(".level-content").corner("tr bl br 8px");

     $('.table td').live("mouseover", function() {

         $(this).addClass('mouseover');

         $(this).parent().children().first().addClass('mouseover');

         var cellIndex = $(this).context.cellIndex;

         $(this).parent().parent().children().first().children().eq(cellIndex).addClass('mouseover');

     });

     $('.table td').live("mouseout", function() {

         $(this).removeClass('mouseover');

         $(this).parent().children().first().removeClass('mouseover');

         var cellIndex = $(this).context.cellIndex;

         $(this).parent().parent().children().first().children().eq(cellIndex).removeClass('mouseover');

     });

 });

JavaScript Code

这里全部用到JQuery做的，当然直接写JavaScript也不难。

最终效果

JQuery焦点Table的更多相关文章

强大的自适应jQuery焦点图特效
jQuery焦点图切换自适应效果自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...
jQuery操作Table tr td常用的方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
汇总常用的jQuery操作Table tr td方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
jquery隐藏table表格的某一列
jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列
JQuery操作Table元素
使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件之前我们已经分享过很多非常实用的jQuery焦点图 ...
8款超绚丽的jQuery焦点图动画
随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...
一款仿PBA官网首页jQuery焦点图的切换特效
一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

随机推荐

JavaScript高级程序设计1.pdf
第一遍通读的时候对JavaScript一点都不了解翻了一整本书仅仅是眼熟的几个名词,现在会写一些js效果了,对程序有一定的认知,又要在读一遍,再加深一些了解,当然以后还会有第三遍第四遍,等完全啃透了这 ...
Asterisk 安装与配置
如果用来管理 1.4 版本的 Asterisk ,可能会存在未知的问题.通过集成 CentOS . Asterisk 和 FreePBX , Fonality 公司提供了一个完全傻瓜式的 Asteri ...
【转】Gabor 入门
Computer Vision Tutorials Search Primary Menu Skip to content Tutorials Search for: Gabor Filters ...
[IOS开发进阶与实战]第一天:CoreData的运行机制
1.数据模型NSManagedObjectModel的建立 1.- (NSManagedObjectModel *)managedObjectModel { if (_managedObjectMod ...
Nunit中文文档
NUnit中文文档:http://www.36sign.com/nunit 关于特性的使用:http://www.36sign.com/nunit/attributes.html
todoing
1.如果系类没有数据需要返回么? 2.需要增加系列的门店打点么?
VS2010+Opencv-2.4.9的配置攻略
1.下载软件 vs2010入门书籍,免积分下载 http://download.csdn.net/detail/u014112584/7325617 opencv2.4.0版本号和一些样例,免积分 ...
linux innode图解2
http://www.opsers.org/linux-home/base/the-knowledge-that-one-day-learn-linux-file-system.html 文件系统是操 ...
Cocos2d-x游戏开发中的消息机制：CCNotificationCenter的使用
在HTML5游戏开发中,js可以使用Event对象的addEventListener(添加事件监听).dispatchEvent(触发事件)实现监听机制,如果在coocos2d-x中,去实现这种机制该 ...
iOS RSA 加密解密及签名验证
1.首先要下载openssl.这个不用说,直接官网下载或者用brew install openssl下载. 2.终端生成私钥密钥. 2.1生成私钥 openssl genrsa - 2.2生成密钥 o ...

JQuery焦点Table

JQuery焦点Table的更多相关文章

随机推荐

热门专题