谁有选项卡特效的代码

这个真不是选项卡你注意一下浏览器的地址发生改变了
如果想做成选项卡的话
那你下边就用一个iframe吧! 然后点击选项的时候改变iframe的src的值和这张图片的src,然后把对应的之前被选中的图片的src改成未选中的

可以下边做成div的吧因为这个要放在平板电脑上的我想要一段js 我不会写

$(function () {
    var divId;
    $("#div1").click(function () {
        $(this).attr("src", "新图片地址");
        switch (divId) {
        case "div1"
        $("#div1").attr("src","旧图片路径");
        break;
        case "div2"
        $("#div2").attr("src","旧图片路径");
        break;
        case "div3"
        $("#div3").attr("src","旧图片路径");
        break;
            default:
        }
        divId = $(this).attr("id");

        //如果是相对应的几个div控制隐藏显示的话
        $("#div1对应的div").css("display","block");
        $("#div2对应的div").css("display","none")
        $("#div3对应的div").css("display","none")
        //如果是用ajax调用的话
        var jsonAvater = "";
        jQuery.ajax({
            type: "post",
            url: "aaaa.aspx/fangfa",
            data: '{ biid:\"' +"区分对应div的参数"+ '\"}',
            success: function (bg) {
                //返回的数据用data.d获取内容
                jsonAvater = bg;
                $("#下面divId").html(bg);
            }
        });
    })
})

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>实现TabView(页签)效果</title>
<meta http-equiv=content-type content="text/html; charset=GBK">
<script type="text/javascript">
function tabclick(obj){
    if(obj.className=='cur')return;
    var idx;
    for(var n=0; n<obj.parentNode.childNodes.length; n++){
        obj.parentNode.childNodes[n].className="";
        if(obj==obj.parentNode.childNodes[n])idx=n;
    }
    obj.className="cur";
    var pc = obj.parentNode.nextSibling;
    while(pc.nodeType==3)pcpc=pc.nextSibling;
    for(var n=0; n<pc.childNodes.length; n++){
        pc.childNodes[n].className="hdn";
    }
    pc.childNodes[idx].className="";
}
</script>
<style type="text/css">
.debug{
    border:1px solid red;
}
.hdn{
    display:none;
}
ul.tabbar,ul.tabpage{
    list-style-type:none;
    margin:0;
    font-size:12px;
    padding:0;
}
ul.tabbar{
    background:url(images/tabview.gif) repeat-x 0 -68px;
    height:34px;
}
ul.tabbar li{
    float:left;
    width:83px;
    height:34px;
    line-height:34px;
    text-align:center;
    background:url(images/tabview.gif);
    cursor:pointer;
    cursor:hand;

}
ul.tabbar li.cur{
    background: url(images/tabview.gif) 0 -34px;
}
ul.tabpage{
    border-style:ridge;
    border-color:#dceefd;
    border-width:0 2px 2px 2px;
    height:302px;
    overflow:hidden;
}
ul.tabpage li{
    height:300px;
    border-width:0;
    overflow-y:auto;
}
</style>
</head>
<body>
<div style=" width:1000px;">
<ul class="tabbar">
    <li style="margin-left:1em" class="cur" onclick="tabclick(this)">过滤条件</li>
    <li onclick="tabclick(this)">排序条件</li>
    <li onclick="tabclick(this)">分　　组</li>
    <li onclick="tabclick(this)">计算字段</li>
    <li onclick="tabclick(this)">计算字段</li>
    <li onclick="tabclick(this)">计算字段</li>
    <li onclick="tabclick(this)">计算字段</li>
</ul>
<ul class="tabpage">
    <li>显示过滤条件</li>
    <li class="hdn">显示排序条件</li>
    <li class="hdn">显示分　　组</li>
    <li class="hdn">显示计算字段</li>
    <li class="hdn">显示计算字段</li>
    <li class="hdn">显示计算字段</li>
    <li class="hdn">显示计算字段</li>
</ul>
</div>
</body>
</html>

选项卡效果么以前写过一个。至少支持IE和FF
使用方法<div id="sxwTab">
<div>圆角预留</div>
<div>这里可以有很多个选项</div>
<div>圆角预留</div>
</div><div id="sxwContent">
<div>这里是内容</div>
<div>这里是内容请自行设置初始状态dispaly隐藏</div>
</div>js调用band.sxw=1;//1表示开始显示第1个. 你也可以不设置, 如果设置为2, 那么请手动设置第2个内容为显示, 其他的为隐藏
bandTab("sxw","normal_1 cDGray","active cWhite");////第1个参数为指定的ID, 第2个参数为显示时的样式, 第3个为不显示的样式.
JS代码var band={};function bandTab(traitId,showClassName,hiddenClassName){
var tab=document.getElementById(traitId+"Tab");
var content=document.getElementById(traitId+"Content");
var tabTypeOne=new Array();
for(var i=0;i<tab.childNodes.length;i++){
if(tab.childNodes[i].nodeType==1){
tabTypeOne.push(i);
}
}var conTypeOne=new Array();
for(var i=0;i<content.childNodes.length;i++){
if(content.childNodes[i].nodeType==1){
conTypeOne.push(i);
}
}
for(var i=1;i<tabTypeOne.length-1;i++){
tab.childNodes[tabTypeOne[i]].setAttribute("tag",i);
tab.childNodes[tabTypeOne[i]].onmousemove=function(){
if(band[traitId]==null){
band[traitId]=1;
}
tab.childNodes[tabTypeOne[band[traitId]]].className=hiddenClassName;
this.className=showClassName;content.childNodes[conTypeOne[band[traitId]-1]].style.display="none";
content.childNodes[conTypeOne[this.getAttribute("tag")-1]].style.display="block";
band[traitId]=this.getAttribute("tag");};
}
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡效果</title>
<script language="javascript" >
var band={};function bandTab(traitId,showClassName,hiddenClassName){
var tab=document.getElementById(traitId+"Tab");
var content=document.getElementById(traitId+"Content");
var tabTypeOne=new Array();
for(var i=0;i<tab.childNodes.length;i++){
if(tab.childNodes[i].nodeType==1){
tabTypeOne.push(i);
}
}

var conTypeOne=new Array();
for(var i=0;i<content.childNodes.length;i++){
if(content.childNodes[i].nodeType==1){
conTypeOne.push(i);
}
}
for(var i=1;i<tabTypeOne.length-1;i++){

tab.childNodes[tabTypeOne[i]].setAttribute("tag",i);
tab.childNodes[tabTypeOne[i]].onmousemove=function(){
if(band[traitId]==null){
band[traitId]=1;
}
tab.childNodes[tabTypeOne[band[traitId]]].className=hiddenClassName;
this.className=showClassName;

content.childNodes[conTypeOne[band[traitId]-1]].style.display="none";
content.childNodes[conTypeOne[this.getAttribute("tag")-1]].style.display="block";
band[traitId]=this.getAttribute("tag");

};
}

}
</script></head><body><DIV class="touch_menu1 cRed" style="width:300px">
<div class="touch_menu" id="sxwTab">
            <div class="left_line"></div>
            <div class="active cWhite">第1个选项</div>
            <div class="normal_1">第2个选项</div>
            <div class="right_line"></div>
          </div><DIV class="blank0"></DIV>
          <div class="touch_menu_content clearfix" id="sxwContent">
            <div style="height:163px;">
              第1个选项内的内容<br/>第1个选项内的内容<br/>第1个选项内的内容<br/>第1个选项内的内容<br/>第1个选项内的内容<br/>第1个选项内的内容<br/>第1个选项内的内容<br/>第1个选项内的内容<br/>第1个选项内的内容
            </div>
            <div style="display: none;height: 163px">
              第2个选项内的内容<br/>第2个选项内的内容<br/>第2个选项内的内容<br/>第2个选项内的内容<br/>第2个选项内的内容<br/>第2个选项内的内容<br/>第2个选项内的内容<br/>第2个选项内的内容<br/>第2个选项内的内容
            </div>
          </div>
          </DIV>
</body>
</html>
<script>
band.sxw=1;//1表示开始显示第1个.   你也可以不设置,  如果设置为2,  那么请手动设置第2个内容为显示, 其他的为隐藏
bandTab("sxw","normal_1 cDGray","active cWhite");////第1个参数为指定的ID, 第2个参数为显示时的样式, 第3个为不显示的样式. （PS：此样式为选项卡样式，跟显示与隐藏无关）
</script>完整的

调试易

谁有选项卡特效的代码

解决方案 »