大神帮小弟我弄个吧

2012-08-17

大神帮我弄个吧.HTML codediv classst_call_stepul classinfo_list tab_info_listli classin

大神帮我弄个吧.

HTML code

<div class="st_call_step">                                                        <ul class="info_list tab_info_list">                        <li class="info_list_select"><a href="#" onclick="return false;">下单</a></li>                    <li><a href="#" onclick="return false;">咨询</a></li>                        <li><a href="#" onclick="return false;">投诉</a></li>                        <li><a href="#" onclick="return false;">售后</a></li>                    </ul>                                    <form class="theForm public_info"  style="position:relative;border-top:1px solid #eee;border-left:1px solid #eee;height:245px;">                        <div class="tab_info_show">                        qqqqqqqqqqqqqqqqqqqqqqqq                        </div>                        <div class="tab_info_hide">                        222222222222222222222222222                        </div>                        <div class="tab_info_hide">                        1111111111111111111                        </div>                        <div class="tab_info_hide">                        3333333333333333333                        </div>                                              </form>                            </div>

大神帮我弄个选项卡吧.因为这个选项卡不能出现id.都是用的class 所以捣鼓了半天也没捣鼓好

[解决办法]
<!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>
<style>
ul{
list-style-type:none;
margin-left:-40px;
position:relative;

}
ul li{
padding:5px;
float:left;
width:80px;
position:relative;

display:block;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style:none;
margin:0px 2px 0px 0px;;
z-index:2;

}
#L1{
background-color:#9CC;
border-top-color: #F6C;
border-right-color: #F6C;
border-left-color: #F6C;
}
#L2{
background-color:#CC9;
border-color:#309;
margin-left:1px;
}

#L3{
background-color:#FF3;
border-color:#360;
}
#L4{
background-color:#690;
border-color:#360;
}

div{

width:400px;
height:220px;
position:absolute;
margin-top:28px;
z-index:1;
}
#d1{
background-color:#9CC;
border:1px solid #C39;

}
#d2{
background-color:#CC9;
border:1px solid #309;
display:none;
}
#d3{
background-color:#FF3;
border:1px solid #360;
display:none;
}

#d4{
background-color:#690;
border:1px solid #360;
display:none;
}
</style>
<script language="javascript">

//选项卡的个数
var num=4;
function getTab(now){

for(var i=1;i<=num;i++){

if(i==now){

document.getElementById("d"+i).style.display="block";
}else{
document.getElementById("d"+i).style.display="none";
}
}

}

</script>
</head>
<body style="margin:0px;">
<ul>
<li id="L1" onclick="getTab(1)">手机数码</li>
<li id="L2" onclick="getTab(2)">手机数码</li>
<li id="L3" onclick="getTab(3)">手机数码</li>
<li id="L4" onclick="getTab(4)">手机数码</li>
</ul>
<div id="d1">这里是手机数码</div>
<div id="d2">这里是家用电器</div>
<div id="d3">这里是品牌服饰</div>
<div id="d4">这里是品牌服饰</div>
</body>
</html>

[解决办法]
楼主，可以用jquery吗？
在你的页面中导入jquery包，再添加如下代码试试吧：

JScript code

<script>                $(".theForm > div").hide();                $(".theForm > div").eq(0).hide();                $(".info_list a").each(function(index, obj){                    $(obj).bind('click', function(){                        $(".theForm > div").hide();                        $(".theForm > div").eq(index).show();                    });                });            </script>
[解决办法]
上面的写的有一点错误，失误吖，我没测过的哦。。。小小的改动一下：

JScript code<script>                $(".theForm > div").hide();                $(".theForm > div").eq(0).show();                $(".info_list a").each(function(index, obj){                    $(obj).bind('click', function(){                        $(".theForm > div").hide();                        $(".theForm > div").eq(index).show();                    });                });            </script>

热点排行

JavaScript

大神帮小弟我弄个吧