常用效果 JS 都是Jquery 没有特殊说明
1.选项卡 用的JQuery 以后学好点再来对比 看下
/*
* @parent 最外层父级元素
* @EventElement 触发事件元素
* @EventType 事件类型
* @addClass 添加样式
* @contentElement 内容元素
* @addContentClass 内容元素添加样式
* */
function hd(parent,EventElement,EventType,addClass,contentElement,addContentClass){
var sonNum =$(EventElement).length;
$(parent).delegate(EventElement,EventType,function(){
$(this).addClass(addClass).siblings().removeClass();
//获取点击元素 在同辈元素索引位置
var index =$(this).index(); $(contentElement).eq(index).addClass(addContentClass).siblings().removeClass(addContentClass);
}) }
hd(".content",".tab-hd-click li","click","tab-on",".content-list li","show");
感觉应该还是可以在写好点的~ 以后一点点的发现在说了~
2.点击 显示隐藏 点击一次显示 再点击一次隐藏 默认CSS 触发元素隐藏 JS点击事件 判断display属性值 进行显示
/*
* 点击显示隐藏
* @clickEle 触发元素
* @showEle 改变元素 show hide
* */
function showOneClick(clickEle,showEle){
var click =$(clickEle),show=$(showEle); click.click(
function(){ $(showEle).css('display') == 'none'? show.show() : show.hide(); }
) } showOneClick("#btnRvw","#rvwbox");
showOneClick("#btnQue","#quebox");
3.两端对齐 写的也不知道啥 等有空来重新整理
贴个要实现的效果图
var list0 =AllDLcontent();
function alignDL1200(dl_start_num,dl_end_num,bar_index,dl_num){
/*每一排5个*/
var list = list0[dl_start_num]+list0[dl_start_num+1]+list0[dl_start_num+2]+list0[dl_start_num+3]+list0[dl_start_num+4];
$('.list-bar').eq(bar_index).after("<div style='width: 1250px;overflow: hidden;margin: 0px auto; padding-left: 47px;'>"+list+"</div>");
}
alignDL1200(0,5,0,5); // 0 1 2 3 4
alignDL1200(5,10,1,5);// 5 6 7 8 9
alignDL1200(10,15,2,5);// 10 11 12 13 14
alignDL1200(15,20,3,5);// 15 16 17 18 19
alignDL1200(20,25,4,5);// 20 21 22 23 24
alignDL1200(25,30,5,5);// 25 26 27 28 29
alignDL1200(30,35,6,5);// 30 31 32 33 34
alignDL1200(35,40,7,5);// 35 36 37 38 39
alignDL1200(40,45,8,5);// 40 41 42 43 44
function AllDLcontent(){
var arr = new Array(), dl = $('.prod-box'),num= dl.length;
$('.prod-box').remove();
for(i=0,ii=num;i<ii;i++){
var content = dl.eq(i).html();
var dl_content ='<dl class="prod-box" positiontag="">'+content+'</dl>';
arr[i]=dl_content;
}
return arr;
}