tab标签切换

时间:2023-03-09 15:06:24
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>