<script>
$(document).ready(function(){
$(".drtitle li").click(function(m){
$(this).addClass("dron");
$(this).prevAll(".drtitle li").removeClass("dron");
$(this).nextAll(".drtitle li").removeClass("dron");
var id = $(this).attr("id");//拿取当前id
//window.curentTarget = this;
//console.log(" the id is :" + id);
var ids = id.match(/([^\d]*)(\d*)/)

try{
var conID = ids[1] + "c" + ids[2];
// TODO 修改 content 数据
// 1. 隐藏所以
// 2. 显示当前

// TODO 处理异常
console.log(" content id is : " + conID);
$(".drcont").hide();
$("#" + conID).show();

} catch (e){
console.log(" error : " + e);
}

});
});
</script>

<!--html代码-->

<div class="dright fl">
<div class="drtitle">
<ul>
<li class="dron" id="dr1">商品介绍</li>
<li id="dr2">购买记录</li>
</ul>
</div>
<div class="drcont" id="drc1"><img src="tmp/tgg5.jpg" /></div>
<div class="drcont" id="drc2" style="display:none;">
<div class="thtit">
<ul>
<li>买家</li>
<li>数量</li>
<li>单价</li>
<li>下单时间</li>
</ul>
</div>
<div class="thcont">
<ul>
<li>
<div class="t1">紫依</div>
<div class="t2">1</div>
<div class="t2"><span class="pink">¥89.00</span></div>
<div class="t2">2015-03-30 10:43:05</div>
</li>
<li>
<div class="t1">紫依</div>
<div class="t2">1</div>
<div class="t2"><span class="pink">¥89.00</span></div>
<div class="t2">2015-03-30 10:43:05</div>
</li>
</ul>
</div>
</div>
</div>

tab标签切换的更多相关文章

  1. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  2. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  3. 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  4. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

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

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Bootstrap——设置Tab标签切换

    最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...

  7. Vue指令:v-for的用法;v-bind绑定class的几种写法;tab标签切换

    一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...

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

    一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...

  9. 一个页面tab标签切换,都有scroll事件的解决办法

    当前页有多个tab,如果都有scroll事件, 先解绑$(window).off('scroll') 再执行scroll就不可以了,多个标签就不会互相干扰: 给你们个例子: //标签切换    $(' ...

  10. JavaScript CSS 实现简单的 TAB 标签切换

    使用CSS隐藏所有tab页,然后使用JavaScript给选中的元素对应ID的tab页设置class="active"类来显示该元素,以此实现tab切换. 如鼠标放置到shwww时 ...

随机推荐

  1. 关于SQLite的伪随机数

    --random() 的返回值范围是:[-2^63,(2^63)-1],而通常要的是最小为 0的随机数,于是就不能直接用了,解决办法: then col else -col end) result f ...

  2. Java IO教程

    1  Java IO 教程 2 Java IO 概述 3 Java IO: 文件 4 Java IO: 管道 5 Java IO: 网络 6 Java IO: 字节和字符数组 7 Java IO: S ...

  3. MYSQL命令行使用指南

    一.连接MYSQL. 格式: mysql -h主机地址 -u用户名 -p用户密码 1.例1:连接到本机上的MYSQL. 首先在打开DOS窗口,然后进入目录 mysqlbin,再键入命令mysql -u ...

  4. 【自动化学习笔记】_环境搭建Selenium2+Eclipse+Java+TestNG_(一)

    目录 第一步  安装JDK 第二步 下载Eclipse 第三步 在Eclipse中安装TestNG 第四步 下载Selenium IDE.SeleniumRC.IEDriverServer 第五步 下 ...

  5. DataTable Linq Example

    DataTable CreateTable() { DataTable dtable = new DataTable(); DataColumn dc; //MId CId FId PId dc = ...

  6. 关于ADO.NET 超时的问题

    前几天超时问题困扰我很头疼. 为什么我设置了链接字符串的超时时间很长,可是等了一小会就报错Timeout了? connectionString="Data Source=.;Initial ...

  7. chrome 扩展包 postman 的安装

    由于chrome网上应用不能使用.添加扩展程序,需要其他的办法. 1.下载postman安装包.下载地址 2.这一步按照这个下载包中的方法,也可以,可以忽略其错误. 先解压出crx,使用两个办法,使用 ...

  8. ios基础篇(二十五)—— Animation动画(UIView、CoreAnimation)

    Animation主要分为两类: 1.UIView属性动画 2.CoreAnimation动画 一.UIView属性动画 UIKit直接将动画集成到UIView类中,实现简单动画的创建过程.UIVie ...

  9. 利用jQueryRotate旋转插件开发大转盘抽奖

    前言: 公司原来开发大转盘抽奖活动用的是flash 我发现swf文件竟然有6m大,吓尿了! 其实完全可以用js写的,但是自身前端功力有限,且时间紧迫,所以直接用旋转插件就好,兼容各方面都可以保证. 1 ...

  10. EF框架学习

    简称EF,ADO.NET Entity Framework是微软以ADO.NET为基础所发展出来的对象关系对应(O/R Mapping)解决方案,是微软的一个ORM(面向对象的对象模型和关系型数据库的 ...