首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

求各位帮帮忙吧!关于tab选项卡的有关问题,跪求~

2012-04-28 
求各位大虾帮帮忙吧!关于tab选项卡的问题,跪求~~~想实现做常用的那种选项卡,代码如下HTML codediv iddi

求各位大虾帮帮忙吧!关于tab选项卡的问题,跪求~~~
想实现做常用的那种选项卡,代码如下

HTML code
<div id="div_tabstwo" class="div_tabs">                <ul>                    <li><a href="#div_initiative"><span>查询条件</span></a></li>                </ul>                <div id="div_initiative">                    <div class="div_basiccontent">                        <div class="div_condition">                            <div class="div_title">                                编号</div>                            <div class="div_input">                                <asp:TextBox ID="NumOfMethod" class="textcss" runat="server"></asp:TextBox></div>                        </div>                        <div class="div_condition">                            <div class="div_title">                                名称</div>                            <div class="div_input">                                <asp:TextBox ID="NameOfMethod" class="textcss" runat="server"></asp:TextBox></div>                        </div>                        <div class="div_condition">                            <div class="div_title">                                类型</div>                            <div class="div_input">                                <asp:DropDownList ID="Protocol" class="selectcss" runat="server" Width="160px">                                </asp:DropDownList>                            </div>                        </div>                     <div class="div_search_botton">                        <div class="div_btnsearch">                            <input runat="server" type="reset" id="resetForm" value="重置" class="btCss" /></div>                        <div class="div_btnsearch">                            <input type="button" runat="server" id="btnSelect" value="查询" class="btCss" /></div>                    </div>                </div>            </div>                                    <!--排序栏结束-->                    <!--显示内容开始-->            <div id="div_tabsthree" class="div_tabs">                <ul>                    <li><a href="#div_show"><span>生成任务</span></a></li>                </ul>                <div id="div_show">

可实际结果和想象的不一样,选项卡标签部分(查询条件)并不是常见的那种显示,而是带下划线的文字,也没有出现边框。小弟初学,求各位大虾指教!

[解决办法]
你采用a标签出来肯定是有下划线的。。。
<a href="#div_initiative" style="text-decoration:none "><span>查询条件</span></a>
这样就没下划线了

[解决办法]
就你上面的代码是不可能实现的。。CSS都不写。。网上代码很多搜搜吧
[解决办法]
HTML code
<!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=gb2312" /><title>简洁Tab</title><style type="text/css"><!--body,div,ul,li{margin:0 auto;padding:0;}body{font:12px "宋体";text-align:center;}a:link{color:#00F;text-decoration:none;}a:visited {color: #00F;text-decoration:none;}a:hover {color: #c00;text-decoration:underline;}ul{list-style:none;}.main{clear:both;padding:8px;text-align:center;}/*第一种形式*/#tabs0 {height: 200px;width: 400px;border: 1px solid #cbcbcb;background-color: #f2f6fb;}.menu0{width: 400px;}.menu0 li{display:block;float: left;padding: 4px 0;width:100px;text-align: center;cursor:pointer;background: #FFFFff;}.menu0 li.hover{background: #f2f6fb;}#main0 ul{display: none;}#main0 ul.block{display: block;}/*第二种形式*/#tabs1{text-align:left;width:400px;}.menu1box{position:relative;overflow:hidden;height:22px;width:400px;text-align:left;}#menu1{position:absolute;top:0;left:0;z-index:1;}#menu1 li{float:left;display:block;cursor:pointer;width:72px;text-align:center;line-height:21px;height:21px;}#menu1 li.hover{background:#fff;border-left:1px solid #333;border-top:1px solid #333;border-right:1px solid #333;}.main1box{clear:both;margin-top:-1px;border:1px solid #333;height:181px;width:400px;}#main1 ul{display: none;}#main1 ul.block{display: block;}/*第三种形式*/.menu2box{position:relative;overflow:hidden;height:22px;width:400px;text-align:left;background: #FFFFff;}#tabs2 {height: 200px;width: 400px;border: 1px solid #cbcbcb;background-color: #f2f6fb;}#tip2{position:absolute;top:0;left:0;height:22px;line-height:22px;z-index:0;width:100px;background: #f2f6fb;}#menu2{position:absolute;top:0;left:0;z-index:1;}#menu2 li{display:block;float: left;padding: 4px 0;width:100px;text-align: center;cursor:pointer;}--></style><script><!--/*第一种形式 第二种形式 更换显示样式*/function setTab(m,n){var tli=document.getElementById("menu"+m).getElementsByTagName("li");var mli=document.getElementById("main"+m).getElementsByTagName("ul");for(i=0;i<tli.length;i++){   tli[i].className=i==n?"hover":"";   mli[i].style.display=i==n?"block":"none";}}/*第三种形式 利用一个背景层定位*/var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}function nowtab(m,n){if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;document.getElementById("tip"+m).style.left=n*100+'px';document.getElementById("main2").innerHTML=m3[n];}//--></script></head><body><br /><br /><!--第一种形式--><div id="tabs0"><ul class="menu0" id="menu0">   <li onclick="setTab(0,0)" class="hover">新闻</li>   <li onclick="setTab(0,1)">评论</li>   <li onclick="setTab(0,2)">技术</li>   <li onclick="setTab(0,3)">点评</li></ul><div class="main" id="main0">   <ul class="block"><li>新闻列表</li></ul>   <ul><li>评论列表</li></ul>   <ul><li>技术列表</li></ul>   <ul><li>点评列表</li></ul></div></div><br /><br /><!--第二种形式--><div id="tabs1"><div class="menu1box">   <ul id="menu1">    <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>    <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>    <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>    <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>   </ul></div><div class="main1box">   <div class="main" id="main1">    <ul class="block"><li>新闻列表</li></ul>    <ul><li>评论列表</li></ul>    <ul><li>技术列表</li></ul>    <ul><li>点评列表</li></ul>   </div></div></div><br /><br /><!--第三种形式--><div id="tabs2"><div class="menu2box">   <div id="tip2"></div>   <ul id="menu2">    <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>    <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>    <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>    <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>   </ul></div>   <div class="main" id="main2">新闻内容</div></div><br /><br /><br /><br /><br /><br /><br /><br /></body></html> 

热点排行