1. 鼠标点击切换选项卡

鼠标点击才会切换，划过没有任何效果

function selectTag(showContent,selfObj){

// 操作标签

var tag = document.getElementById(“tags”).getElementsByTagName(“li”);

var taglength = tag.length;

for(i=0; i<taglength; i++){

tag[i].className = “”;

}

selfObj.parentNode.className = “selectTag”;

// 操作内容

for(i=0; j=document.getElementById(“tagContent”+i); i++){

j.style.display = “none”;

}

document.getElementById(showContent).style.display = “block”;

}

这个比较常用，用法也比较简单，将未点击下面的div隐藏即可

2.鼠标划过切换，一个页面可以使用无限次

$(document).ready(function(){

$(“#layout-t span:first”).addClass(“current”);

$(“#layout-t .tab-bd-con:gt(0)”).hide();

$(“#layout-t span”).mouseover(function(){//mouseover 改为 click 将变成点击后才显示，mouseover是滑过就显示

$(this).addClass(“current”).siblings(“span”).removeClass(“current”);

$(“#layout-t .tab-bd-con:eq(“+$(this).index()+”)”).show().siblings(“.tab-bd-con”).hide().addClass(“current”);

});

});

在网页head中引入js代码，修改样式

3.鼠标划过切换，且自动切换

$(function() {

$(“.webwidget_scroller_tab”).webwidget_scroller_tab({

scroller_time_interval: ’5000′,

scroller_window_padding: ’10′,

scroller_window_width: ’262′,

scroller_window_height: ’220′,

scroller_head_text_color: ‘#084b6e’,

scroller_head_current_text_color: ‘#666′,

directory: ‘images’

});

});

这里可以修改自动划过的时间，高宽等等样式问题，这个文件上面还需要引入一个scroll的js