欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

标签切换菜单大全

javascript 夜阑小雨 224℃ 0评论

1 从126邮箱提取的选项卡tab特效代码:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” >
<!–
Email:ibm_sun_microsoft@163.com
QQ:312151701
–>
<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{
padding:0;
text-align:center;
}
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;}
/*选项卡1*/
#Tab1{
width:460px;
margin:0px;
padding:0px;
margin:0 auto;}
/*选项卡2*/
#Tab2{
width:576px;
margin:0px;
padding:0px;
margin:0 auto;}
/*菜单class*/
.Menubox {
width:100%;
background:url(http://www.makewing.com/images/uppic/200801081251340.gif);
height:28px;
line-height:28px;
}
.Menubox ul{
margin:0px;
padding:0px;
}
.Menubox li{
float:left;
display:block;
cursor:pointer;
width:114px;
text-align:center;
color:#949694;
font-weight:bold;
}
.Menubox li.hover{
padding:0px;
background:#fff;
width:116px;
border-left:1px solid #A8C29F;
border-top:1px solid #A8C29F;
border-right:1px solid #A8C29F;
background:url(http://www.makewing.com/images/uppic/200801081249070.gif);
color:#739242;
font-weight:bold;
height:27px;
line-height:27px;
}
.Contentbox{
clear:both;
margin-top:0px;
border:1px solid #A8C29F;
border-top:none;
height:181px;
text-align:center;
padding-top:8px;
}
–>
</style>
<script>
<!–
/*第一种形式 第二种形式 更换显示样式*/
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById(“con_”+name+”_”+i);
menu.className=i==cursel?”hover”:””;
con.style.display=i==cursel?”block”:”none”;
}
}
//–>
</script>
</head>
<body>
<br><br>
<div id=”Tab1″>
<div class=”Menubox”>
<ul>
<li id=”one1″ onclick=”setTab(‘one’,1,4)” class=”hover”>新闻1</li>
<li id=”one2″ onclick=”setTab(‘one’,2,4)” >新闻2</li>
<li id=”one3″ onclick=”setTab(‘one’,3,4)”>新闻3</li>
<li id=”one4″ onclick=”setTab(‘one’,4,4)”>新闻4</li>
</ul>
</div>
<div class=”Contentbox”>
<div id=”con_one_1″ class=”hover”>新闻列表1</div>
<div id=”con_one_2″ style=”display:none”>新闻列表2</div>
<div id=”con_one_3″ style=”display:none”>新闻列表3</div>
<div id=”con_one_4″ style=”display:none”>新闻列表4</div>
</div>
</div>
<br>
<div id=”Tab2″>
<div class=”Menubox”>
<ul>
<li id=”two1″ onclick=”setTab(‘two’,1,4)” class=”hover”>新闻1</li>
<li id=”two2″ onclick=”setTab(‘two’,2,4)” >新闻2</li>
<li id=”two3″ onclick=”setTab(‘two’,3,4)”>新闻3</li>
<li id=”two4″ onclick=”setTab(‘two’,4,4)”>新闻4</li>
</ul>
</div>
<div class=”Contentbox”>
<div id=”con_two_1″ >新闻列表1</div>
<div id=”con_two_2″ style=”display:none”>新闻列表2</div>
<div id=”con_two_3″ style=”display:none”>新闻列表3</div>
<div id=”con_two_4″ style=”display:none”>新闻列表4</div>
</div>
</div>
</body>
</html>
本代码由<a href=http://www.qpsh.com>网页特效网</a>提供

———————————

2. 美观实用的标签切换菜单

<html>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>网页特效 >
<style>
body {
font-family: “宋体”;
font-size: 12px;
color: #525252;
}
td {
font-family: “宋体”;
font-size: 12px;
color: #525252;
}
a:link {
color: #525252;
font-size: 12px;
text-decoration: none;
}
a:visited{
color: #525252;
font-size: 12px;
text-decoration: none;
}
a:hover {
color: #ff6600;
font-size: 12px;
text-decoration: underline;
}
.gd1{
font-family: “宋体”;
font-size: 12px;
color: #ff0000;
}

.sec11 {BORDER-RIGHT: #C5E1FE 1px solid; BORDER-TOP: #C5E1FE 1px solid; BORDER-LEFT: #C5E1FE 1px solid; CURSOR: hand; COLOR: #01499A; BORDER-BOTTOM: #C5E1FE 1px solid; BACKGROUND-COLOR: #ffffff}
.sec21 {BORDER-RIGHT: #C5E1FE 1px solid; BORDER-TOP: #C5E1FE 1px solid; FONT-WEIGHT: 800;color:#01499A; BORDER-LEFT: #C5E1FE 1px solid;BORDER-BOTTOM: #C5E1FE 1px solid; CURSOR: hand; BACKGROUND-COLOR: #E6EEF7;BACKGROUND:url(‘/icon/098.gif’) no-repeat}
.main_tab {BACKGROUND-COLOR: #ffffff}
</style>
<!–JavaScript部分–>
<SCRIPT language=javascript>
function secBoard(n)
{
    for(i=0;i<secTable.cells.length;i++)
      secTable.cells

[i].className=”sec11″;
    secTable.cells[n].className=”sec21″;
    for(i=0;i<mainTable.tBodies.length;i++)
      mainTable.tBodies

[i].style.display=”none”;
    mainTable.tBodies

[n].style.display=”block”;
}
</SCRIPT>
</head>

<body>
<p align=”center”>这里便于演示,只设置了两个栏目切换,你可以根据需要,自行增加栏目!修改CSS使它更适合你的网站<br>
<br>
<a target=”_blank” href=”http://www.qpsh.com/“>有问题请看这里</a></p>
<div align=”center”>
        <table border=”0″ width=”200″ cellpadding=”0″ cellspacing=”0″ style=”border-collapse: collapse” height=”145″ id=”table7″ bgcolor=#ecf5ff>
         <tr>
          <td height=”145″>
          <div align=”center”>
           <table border=”0″ width=”200″ cellpadding=”0″ style=”border-collapse: collapse” height=”140″ id=”table107″>
            <tr>
             <td height=”25″>
             <div align=”center”>
              <table border=”0″ width=”220″ cellpadding=”0″ style=”border-collapse: collapse” height=”22″ id=secTable>
               <tr>
                <td class=sec21 onmouseover=secBoard(0) width=”50%”>
                <p align=”center”>菜单特效</td>
                <td class=sec11 onmouseover=secBoard(1) width=”50%”>
                <p align=”center”>网页特效简介</td>
               </tr>
              </table>
             </div>
             </td>
            </tr>
            <tr>
             <td height=”115″>
             <div align=”center”>
              <table id=mainTable border=”0″ width=”195″ cellpadding=”0″ style=”border-collapse: collapse” height=”115″>
              <TBODY style=”DISPLAY: block”><tr>
                <td height=”145″><div align=”center”>
        <table border=”0″ width=”205″ cellpadding=”0″ style=”border-collapse: collapse” height=”138″>
         <tr>
          <td height=”23″ width=”15″ valign=”middle”>
             ·</td>
          <td height=”23″ width=”180″>
          <a target=”_blank” style=”color: #01499a” href=”http://www.qpsh.com/javascript/showpage2277.htm“>超酷XP风格网页右键菜单</a></td>
         </tr>
         <tr>
          <td height=”23″ width=”15″>
             ·</td>
          <td height=”23″ width=”180″>
          <a target=”_blank” style=”color: #01499a” href=”http://www.qpsh.com/javascript/showpage2276.htm“>通用3级联动菜单</a></td>
         </tr>
         <tr>
          <td height=”23″ width=”15″>
             ·</td>
          <td height=”23″ width=”180″>
          <a target=”_blank” style=”color: #01499a” href=”http://www.qpsh.com/javascript/showpage2275.htm“>相当好玩的右键弹出菜单</a></td>
         </tr>
         <tr>
          <td height=”23″ width=”15″>
             ·</td>
          <td height=”23″ width=”180″>
          <a target=”_blank” style=”color: #01499a” href=”http://www.qpsh.com/javascript/showpage2274.htm“>用CSS设计的纵向导航条实例</a></td>
         </tr>
         <tr>
          <td height=”23″ width=”15″>
             ·</td>
          <td height=”23″ width=”180″>
          <a target=”_blank” style=”color: #01499a” href=”http://www.qpsh.com/javascript/showpage2272.htm“>将网站设为首页的代码</a></td>
         </tr>
         <tr>
          <td height=”23″ width=”195″ colspan=”2″>
             <p align=”right”><font color=”#01499A”>
             <a target=”_blank” href=”http://www.qpsh.com/listpage/102_1.htm“>
             <font color=”#01499A”>更多</font><font color=”#01499A” face=”Arial”>>>></font></a></font></td>
          </tr>
         </table>
       </div></td>
               </tr></TBODY>
               <TBODY style=”DISPLAY: none”><tr>
                <td height=”145″><div align=”center”>
        <table border=”0″ width=”205″ cellpadding=”0″ style=”border-collapse: collapse” height=”138″>
         <tr>
          <td height=”138″ width=”195″ style=”line-height: 150%”>
               
             <b>
             <a target=”_blank” href=”http://www.qpsh.com/“>网页特效</a></b>是用程序代码在网页中实现特殊效果或者特殊功能的一种技术,它为网页活跃了气氛,增加了网站的亲和力。为网页添加特效,学会添加<a target=”_blank” href=”http://www.qpsh.com/“>网页特效</a>的过程能从一定程度上激发网页初学者更加了解HTML语言的结构。</td>
         </tr>
         </table>
       </div></td>
               </tr></TBODY>
              </table>
             </div>
             </td>
            </tr>
           </table>
          </div>
          </td>
         </tr>
         </table>
       </div>
</body>

</html>

3.实用的标签切换菜单效果

<html>
<head>
<style>
td{ font-size:14px; color:#333333; line-height:140%}
body{ font-size:14px; color:#333333; line-height:140%;}
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(http://www.qpsh.com/icon/shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(http://www.qpsh.com/icon/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block!important;
}
}
</style>
<script type=”text/javascript”>
//** by www.qpsh.com

var enabletabpersistence=1 //enable tab persistence via session only cookies, so selected tab is remembered?

////NO NEED TO EDIT BELOW////////////////////////
var tabcontentIDs=new Object()

function expandcontent(linkobj){
var ulid=linkobj.parentNode.parentNode.id //id of UL element
var ullist=document.getElementById(ulid).getElementsByTagName(“li”) //get list of LIs corresponding to the tab contents
for (var i=0; i<ullist.length; i++){
ullist[i].className=”” //deselect all tabs
if (typeof tabcontentIDs[ulid][i]!=”undefined”) //if tab content within this array index exists (exception: More tabs than there are tab contents)
document.getElementById(tabcontentIDs[ulid][i]).style.display=”none” //hide all tab contents
}
linkobj.parentNode.className=”selected” //highlight currently clicked on tab
document.getElementById(linkobj.getAttribute(“rel”)).style.display=”block” //expand corresponding tab content
saveselectedtabcontentid(ulid, linkobj.getAttribute(“rel”))
}

function expandtab(tabcontentid, tabnumber){ //interface for selecting a tab (plus expand corresponding content)
var thetab=document.getElementById(tabcontentid).getElementsByTagName(“a”)[tabnumber]
if (thetab.getAttribute(“rel”))
expandcontent(thetab)
}

function savetabcontentids(ulid, relattribute){// save ids of tab content divs
if (typeof tabcontentIDs[ulid]==”undefined”) //if this array doesn’t exist yet
tabcontentIDs[ulid]=new Array()
tabcontentIDs[ulid][tabcontentIDs[ulid].length]=relattribute
}

function saveselectedtabcontentid(ulid, selectedtabid){ //set id of clicked on tab as selected tab id & enter into cookie
if (enabletabpersistence==1) //if persistence feature turned on
setCookie(ulid, selectedtabid)
}

function getullistlinkbyId(ulid, tabcontentid){ //returns a tab link based on the ID of the associated tab content
var ullist=document.getElementById(ulid).getElementsByTagName(“li”)
for (var i=0; i<ullist.length; i++){
if (ullist[i].getElementsByTagName(“a”)[0].getAttribute(“rel”)==tabcontentid){
return ullist[i].getElementsByTagName(“a”)[0]
break
}
}
}

function initializetabcontent(){
for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
if (enabletabpersistence==0 && getCookie(arguments[i])!=””) //clean up cookie if persist=off
setCookie(arguments[i], “”)
var clickedontab=getCookie(arguments[i]) //retrieve ID of last clicked on tab from cookie, if any
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName(“li”) //array containing the LI elements within UL
for (var x=0; x<ulist.length; x++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName(“a”)[0]
if (ulistlink.getAttribute(“rel”)){
savetabcontentids(arguments[i], ulistlink.getAttribute(“rel”)) //save id of each tab content as loop runs
ulistlink.onclick=function(){
expandcontent(this)
return false
}
if (ulist[x].className==”selected” && clickedontab==””) //if a tab is set to be selected by default
expandcontent(ulistlink) //auto load currenly selected tab content
}
} //end inner for loop
if (clickedontab!=””){ //if a tab has been previously clicked on per the cookie value
var culistlink=getullistlinkbyId(arguments[i], clickedontab)
if (typeof culistlink!=”undefined”) //if match found between tabcontent id and rel attribute value
expandcontent(culistlink) //auto load currenly selected tab content
else //else if no match found between tabcontent id and rel attribute value (cookie mis-association)
expandcontent(ulist[0].getElementsByTagName(“a”)[0]) //just auto load first tab instead
}
} //end outer for loop
}
function getCookie(Name){
var re=new RegExp(Name+”=[^;]+”, “i”); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split(“=”)[1] //return its value
return “”
}

function setCookie(name, value){
document.cookie = name+”=”+value //cookie value is domain wide (path=/)
}
</script>
</head>
<body>
<ul id=”maintab” class=”shadetabs”>
<li class=”selected”><a href=”#” rel=”tcontent1″>简介</a></li>
<li><a href=”#” rel=”tcontent2″>运用</a></li>
<li><a href=”#” rel=”tcontent3″>实例</a></li>
<li><a href=”#” rel=”tcontent4″>反馈</a></li>
<li><a target=_blank href=”http://www.qpsh.com“>网页特效园地</a></li>
</ul>

<div class=”tabcontentstyle”>

<div id=”tcontent1″ class=”tabcontent”>
<a target=”_blank” href=”http://www.qpsh.com/“>
<img border=”0″ src=”http://www.qpsh.com/icon/otter.jpg” width=”200″ height=”181″ align=”left” hspace=”5″></a><p>  
<b>什么是网页特效?<br>
</b><br>
    网页特效是用程序代码在网页中实现特殊效果或者特殊功能的一种技术,它为网页活跃了气氛,增加了网站的亲和力。
</div>

<div id=”tcontent2″ class=”tabcontent”>
<a target=”_blank” href=”http://www.qpsh.com/“>
<img border=”0″ src=”http://www.qpsh.com/icon/bird.jpg” width=”200″ height=”181″ align=”left” hspace=”5″></a><p>   
<b>如何使用网页特效?<br>
</b><br>    一般在你想添加特效的地方直接粘贴特效代码即可,有些特殊的代码还需要在别的地方添加其他代码。在本站下载的特效代码,都有详细说明,按说明使用即可。</div>

<div id=”tcontent3″ class=”tabcontent”>
<a target=”_blank” href=”http://www.qpsh.com/“>
<img border=”0″ src=”http://www.qpsh.com/icon/dog.jpg” width=”200″ height=”181″ align=”left” hspace=”5″></a><p>  
<b>什么是网页特效?<br>
</b><br>
    网页特效是用程序代码在网页中实现特殊效果或者特殊功能的一种技术,它为网页活跃了气氛,增加了网站的亲和力。
</div>

<div id=”tcontent4″ class=”tabcontent”>
<a target=”_blank” href=”http://www.qpsh.com/“>
<img border=”0″ src=”http://www.qpsh.com/icon/cat.jpg” width=”200″ height=”181″ align=”left” hspace=”5″></a><p>  
<b>如何使用网页特效?<br>
</b><br>
   
一般在你想添加特效的地方直接粘贴特效代码即可,有些特殊的代码还需要在别的地方添加其他代码。在本站下载的特效代码,都有详细说明,按说明使用即可。</div>

</div>

<script type=”text/javascript”>
//Start Tab Content script for UL with id=”maintab” Separate multiple ids each with a comma.
initializetabcontent(“maintab”)
</script>
</body>
</html>

4.三款不同尺寸的标签切换菜单:

http://www.setasp.com/Tx/Text/200905/14-383.html

转载请注明:夜阑小雨 » 标签切换菜单大全

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址