Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 javascript tab选项卡实现切换加载其它页面方法

javascript tab选项卡实现切换加载其它页面方法

发布时间:2017-01-09   编辑:www.jquerycn.cn
jquery中文网为您提供javascript tab选项卡实现切换加载其它页面方法等资源,欢迎您收藏本站,我们将为您提供最新的javascript tab选项卡实现切换加载其它页面方法资源
本文章要说明一下javascript tab选项卡实现切换加载其它页面方法哦,很经典的实现方法,有需要的朋友可以参考一下。
<script>ec(2);</script>
提示:您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>标签示例</title> <style type="text/css"> body { font-size:14px; font-family:"宋体"} ol li { margin:8px} #con { font-size:12px; width:600px; margin:0 auto} #tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px} #tags li { float:left; margin-right:1px; background:url(http://www.happyshow.org/sample/20061108/images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none} #tags li a { text-decoration:none; float:left; background:url(http://www.happyshow.org/sample/20061108/images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999} #tags li.emptyTag { width:4px; background:none} #tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px} #tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;} #tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;width:100%;} .tagContent { background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x; height:350px; padding:10px; color:#474747; width:576px; display:none} #tagContent div.selectTag{ display:block} .tagFrame{ background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x; } </style> <script language="JavaScript"> </script> </head> <body> <h1>标签示例</h1>
<ul id="tags"> <li>标签一</li> <li class="selectTag">标签二</li> <li>自适应宽度的标签</li> </ul>
<iframe class="tagFrame" name="tabIframe" src="http://www.google.com" marginheight="8" marginwidth="8" frameborder="0" width="100%" height="100%"></iframe>
<script type="text/javascript"> function selectTag(showContent,url,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"; }
提示:您可以先修改部分代码再运行

您可能感兴趣的文章:
jquery的index方法实现tab效果
基于JQuery的6个Tab选项卡插件
JQuery Tab选项卡效果代码改进版
用jQuery打造TabPanel效果代码
jquery tools之tabs 选项卡/页签
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
使用jquery实现div的tab切换实例代码
结构/表现/行为完全分离的选项卡(jquery版和原生JS版)
不要使用jQuery触发原生事件的方法
jquery常用ui(dialog...) jquery widget

[关闭]