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时 ...
随机推荐
- JavaWeb基础: Cookie
Cookie相关类: javax.servlet.http.Cookie 用于创建Cookie response 里通过addCookie方法添加Cookie到响应头 request里通过getCoo ...
- Python’s SQLAlchemy vs Other ORMs[转发 2]Storm
Storm Storm is a Python ORM that maps objects between one or more databases and Python. It allows de ...
- 解决 笔记本键盘打字母却跳出数字来,每次都要按一遍Fn+Num LK 的问题
方法一. 开始-运行,输入“Regedit"命令进入注册表 HKEY_USERS\.DEFAULT\Control Panel\Keyboard 将 InitialKeyboardIndic ...
- VPS/云主机 如何试用远程连接登录主机服务器_
1.windows主机如何远程登录 点本地电脑开始>运行(或者按"window+R")>输入mstsc点确定 弹出远程连接的框输入IP连接, 如果是VPS,直接输入I ...
- js判断是否是微信浏览器
<script type="text/javascript"> window.onload = function(){ if(isWeiXin()){ var p = ...
- Swiper说明&&API手册 【中文手册Swiper】
原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...
- mysql数据的行列转换
动态,适用于列不确定情况,第一种: SET @EE=''; SELECT GROUP_CONCAT('SUM(IF(C2=\'',C2,'\'',',C3,0)) AS ',C2)INTO @EE F ...
- 部署私有的Nuget服务器
1.查看官方的部署文档:http://docs.nuget.org/Create/Hosting-Your-Own-NuGet-Feeds 2.使用开源的项目:https://github.com/h ...
- Android FragmentTransactionExtended:使Fragment以多种样式动画切换
有多种fragment之间切换的效果,效果是这样的: Demo的实现是很简单的. 在res/values中,新建一个arrays.xml文件,存放Fragment动画效果的名称,在spinner中使用 ...
- 【软件工具】Driver Booster3永久激活法
原作者網址:erik2041999 (YouTube) 1.安装Driver Booster3 (档案已附) 2.使用此启动码0187E-B9764-4D9FA-211B3断网启动 3.保持断网状态并 ...