tab标签切换
<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标签切换的更多相关文章
- JS特效之Tab标签切换
在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...
- JS 实现 Tab标签切换功能
Tab标签切换 效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
- 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图
SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...
- jQuery蓝色修边tab标签切换
jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...
- 每天一个JavaScript实例-tab标签切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Bootstrap——设置Tab标签切换
最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...
- Vue指令:v-for的用法;v-bind绑定class的几种写法;tab标签切换
一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...
- 很好用的Tab标签切换功能,延迟Tab切换。
一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...
- 一个页面tab标签切换,都有scroll事件的解决办法
当前页有多个tab,如果都有scroll事件, 先解绑$(window).off('scroll') 再执行scroll就不可以了,多个标签就不会互相干扰: 给你们个例子: //标签切换 $(' ...
- JavaScript CSS 实现简单的 TAB 标签切换
使用CSS隐藏所有tab页,然后使用JavaScript给选中的元素对应ID的tab页设置class="active"类来显示该元素,以此实现tab切换. 如鼠标放置到shwww时 ...
随机推荐
- [sqoop1.99.6] 基于1.99.6版本的一个小例子
1.创建mysql数据库.表.以及测试数据mysql> desc test;+-------+-------------+------+-----+---------+------------- ...
- TypeError: coercing to Unicode: need string or buffer, ChatRoom found
在用django框架中遇到一个错误,是模型编写中出的错误 TypeError: coercing to Unicode: need string or buffer, ChatRoom found 解 ...
- css中vw,vh单位对于UC的兼容性问题
vw,vh单位在移动端浏览器不兼容,在网上找半天也没找到什么官方的解决方法:我就试了一下在使用到vh的单位之前添加一个用px定义的样式: 如: 当浏览器不是别100vw单位的时候 就会赋给px单位的样 ...
- n进制转化成十进制
一个字节是8位二进制. 我的天啊.我发现char特别厉害: char类型能够输入整形常量.不能超过-128~127. 只能是整数类型,且范围一般不能超出-128~127.超出会溢出的.
- ES5——函数,对象,方法,this
JS由表达式和语句组成 表达式:计算出一个值,但并不进行任何操作,不改变计算机运行状态 语句:包括 声明语句,赋值语句,控制结构 函数,对象,方法,this 数组和对象:是两个非常重要的数据类型 函数 ...
- 实现断点续传的FTP下载类(支持多线程多任务下载)
using System; using System.Collections.Generic; using System.Text; using System.Threading; using Sys ...
- nodejs学习篇
最近在找工作,然后都说会个后台语言更好,选来选去,觉得nodejs比较有意思,就开始着手学这个了. 其实个人觉得,没有人领一下或者没有本好书去跟着做,这样的学习实在特别累,像我这种刚入门的菜鸟,完全搞 ...
- Python 爬取所有51VOA网站的Learn a words文本及mp3音频
Python 爬取所有51VOA网站的Learn a words文本及mp3音频 #!/usr/bin/env python # -*- coding: utf-8 -*- #Python 爬取所有5 ...
- angularjs的一些坑关于 $sec
今天遇到$sec的问题 app.filter('to_trusted', ['$sce', function ($sce) { return function (text) { return $sce ...
- Seajs教程 配置文档
seajs.config Obj alias Obj 别名配置,配置之后可在模块中使用require调用require('jQuery'); seajs.config({ alias:{ 'jquer ...