<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. 最佳的 14 个免费的响应式 Web 设计测试工具

    一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...

  2. nodejs 服务端添加相应头Access-Control-Allow-Origin

    重点在这句:res.setHeader("Access-Control-Allow-Origin", "*"); var http = require(&quo ...

  3. asp.net "true"的小坑

    在cs文件中 写了一个 属性 protected bool IsTrue { get{ return true; } } 在页面 .aspx文件中 在js中 var flag="<%= ...

  4. android intent和intent action大全

    1.Intent的用法:(1)用Action跳转1,使用Action跳转,如果有一个程序的AndroidManifest.xml中的某一个 Activity的IntentFilter段中 定义了包含了 ...

  5. WDA导出文件XLS,WORD

    METHOD ONACTIONEXCEL . DATA: LO_NODE TYPE REF TO IF_WD_CONTEXT_NODE, "Node LO_ELEM TYPE REF TO ...

  6. C#中REF和OUT的区别

    在C# 中,既可以通过值也可以通过引用传递参数.通过引用传递参数允许函数成员更改参数的值,并保持该更改.若要通过引用传递参数, 可使用ref或out关键字.ref和out这两个关键字都能够提供相似的功 ...

  7. Android FragmentTransactionExtended:使Fragment以多种样式动画切换

    有多种fragment之间切换的效果,效果是这样的: Demo的实现是很简单的. 在res/values中,新建一个arrays.xml文件,存放Fragment动画效果的名称,在spinner中使用 ...

  8. iOS网络推送消息

    在iOS项目的appdelegate.m文件中: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOpti ...

  9. Cookie与Session用法

    以下是Cookie的完整实例 MyEclipse新建web Project工程,建两个jsp文件,如下 1.login.jsp <%@ page language="java" ...

  10. 跨域请求ajax jsonp的使用解惑

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...