用js如何实现切换？？-中国学网-中国IT综合门户网站
> 用js如何实现切换？？
用js如何实现切换？？
转载 编辑：李强
为了帮助网友解决“用js如何实现切换？？”相关的问题，中国学网通过互联网对“用js如何实现切换？？”相关的解决方案进行了整理,用户详细问题包括:div&/&qaMenu& &lt:
&course-menu-item&active&/ & class=& id=&quot:void(0)&li&div id=&& style=&
&list-tab-con& class=&div&
&a&ul& 评论 & & class=&course-menu-item&&&/ &&lt:&list-tab-con&pl-content&/li class=&a&&/div id=&li& 问答 &li class=&//qa-content&ul class=&&#47:void(0)&a href=&& & & & class=&plMenu&course-menu course-video-menu clearfix&a href=& style=&&div&& && id=&quot&lt，具体解决方案如下：解决方案1： &lt:void(0)&quot.hide();&gt.click(function(){ $(& style=&course-menu-item&a href=&&/js/jquery-1;);//li&gt.9;div id=&quot.list-tab-con&quot: block.1;script type=&quot.eq($(&/; class=&a&gt.&&qaMenu&div&}).com/js/jquery-1;/& & class=&;plMenu&& &active& id=&/ 信息2 &script&course-menu-item&);&lt.list-tab-con&quot.siblings(&ul& });a href=&quot: 信息1 &list-tab-con&script&gt.js" target="_blank"> &lt:void(0)&&qa-content& &lt.show(); 评论 &li class=&&#47.js&div&a&$(document);&#47.9;&& &lt.sz886; class=&quot.index(this));li class=& style=&script type=&&
&div id=&course-menu course-video-menu clearfix&list-tab-con& id=&;);ul class=&;&).course-menu-item&li&text/div&gt.sz886;javascript& src=&quot.ready(function() { $(& class=&&&javascript&quot://www.1;&text//&javascript.&gt://pl-content&/ 问答 & & &lt使用jquery比较方便下面就是代码;/&gt.course-menu-item&quot解决方案2：哇哦，好厉害啊，但是“评论”“问答”那些东西不会动解决方案3：谢谢，可以给个联系方式吗？？？通过对数据库的索引,我们还为您准备了：问：本人不会js求助大家答：给你一个插件吧~不过要配合CSS哦~其实也没什么~就是有几个选项卡就写几个内容出来然后其他的隐藏，只让当前的显示~给你...===========================================问：本人不会js求助大家答：1.首先将以下代码插入到你body需要设置导航的地方 梧桐首页 网站优化 var nav = document.getElementById("navi"); var links = nav.getElementsByTagName("li"); var lilen = nav.getElementsByTagName("a"); //判断地址 var currenturl = docu...===========================================问：1）默认情况下每隔0.8秒播放一张图片 2）共6张图片1）答：如果想效果美观就去下一个jquery. 最简单的: var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]="5.jpg"; arr[5]="6.jpg"; arr[6]="7...===========================================问：JS列表切换效果如何实现?请高手帮忙一下?答： 新闻1 新闻2 新闻3 新闻4
新闻列表2 新闻列表3 新闻列表4 ===========================================问：实现点击一个按钮第一次 往后台传递1 第二次传递2 第三次还是传递1 如此...答：Insert title here var i=0; function myClick(){ var k=0; i++; if(i%2==0) k=2; else k=1; alert(k); } ===========================================问：就是只有一个背景白色的div框，点击一下换成红色色，再点下又变回白色，...答：通过点击事件切换图片/背景色即可，可以通过一个全局变量来记录当前的状态，每次点击更改css和状态就行了===========================================问：js代码如下 为什么变色可以实现，当点击切换时却切换不了呢，求大神解答答：点击切换前要把所有先display="none",然后再把点击的显示出来===========================================问：js代码如下 为什么变色可以实现，当点击切换时却切换不了呢，求大神解答答：作单页面应用. 每个选项卡对应一个div. 选中的选项卡对应的div才显示出来. 用angularJS会比较好作吧.===========================================问：点击每个小点就会出现对应的图片 这样的效果很常见 怎么做呢答：比如 我就不写几个小点了 写一个把！javascript能通过DOM来修改对象的src属性 function bianhua(){ //图片变化函数 var img = document.getElementById("tupian"); //创建个变量 它等于img 对象 img.src="xxx/xxxjpg"; 操作img对象的src属性 = ...===========================================试试这个图片切换 有12345数字一起切换 鼠标点一下数字会变换到另一张图片,不点就会自动换 里面有教程和源码===========================================和在html中写js代码一样的啊,如果你不会在html中写js代码,可以私信我、、 希望可以帮助你,谢谢采纳。。===========================================这可以理解成为动画效果,最简单方法可以用jQurey的动画效果做,就是用hide(3000)方法或者sliddown(3000)方法,括号中的数值是隐藏或者消失所用的时间,单位是毫秒。建议你...===========================================中英文切换如一楼那样做不行吧,如果要用JS做且不访问后台的话,应该使用国际化的那一套东西,把要显示的text部分定义在一个JS对象里,切换的时候重新在前台加载一遍就可以...=========================================== 把三个数据放到一个数组中,并将数组的值放到箭头中间的容器中,比如div块, 每次点击箭头在代码中调整数组的位置,然后重新给容器中的赋值。===========================================ie浏览器中有自带的切换效果可供调用; 其它浏览器的话得自己写程序定位,如淡入淡出可以利用设置css的opacity属性实现; 百叶窗可以利用程序生成N个div,每个div的背景图...=========================================== click后根据原先按钮的值,赋不同的值就OK拉也可以使用jQuery的toggle(fn,fn)函数每次点击后依次调用函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击...=========================================== 发你文档了 试试=========================================== 我用ASP做网页,想要首页上有一个这样的效果:一个大图片,下面有一排小图片,图片间能按照一定的时间隔切换,当将鼠标放在小图上时,就显示当前的小图片,停止图片切换,直到...===========================================不使用ajax 就要在加载的时候 把数据全部加载出来 分页在不同的tab里面 只是用js来判断改显示那个 tab而已 如果使用ajax 只要在切换的时候调用相应的内容出来 我觉得a...===========================================
本文欢迎转载，转载请注明：转载自中国学网： []
用户还关注
可能有帮助还没有任何记录...
点击切换和自动切换选项卡
来源：懒人建站作者：懒人建站懒人建站日期： 14:41人气:次
CSS选项卡：你什么都不要做，你会看到选项卡在自己切换，当然你也可以点击切换。
我们为您提供-JS代码，网页图标，网页欣赏模板，SEO优化和各种建站技巧；
懒人建站只收录实用和能提高用户体验的代码
我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。
你什么都不要做，你会看到在自己切换，当然你也可以点击切换。
本文链接：/js/texiao/131.html
点击切换和自动切换选项卡由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
点击切换和自动切换选项卡-相关文章
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
网页特效-推荐
网页特效-人气榜
懒人建站为您提供-基于jquery特效，jquery弹出层效果，导航菜单代码，下拉菜单代码和jquery焦点图片代码，懒人建站关注软件界面设计，WEB/后台/手机/软件UI设计、建站素材、html5和CSS3新技术等。博客搬家了,欢迎大家访问新地址&script&function ShowLayers(n,m){&&for(i=1;i&=m;i++)&{&&eval(&content& + i).style.display=&none&;&&eval(&title&+i+&.style.background=\&ffffff\&;&);&}&eval(&title&+n+&.style.background=\&cccccc\&;&);&eval(&content& + n).style.display=&&;}&/script&&table width=&500& border=&0& cellpadding=&0& cellspacing=&0& bgcolor=&ffffff&&& &tr&&&& &td height=&20& id=&title1& bgcolor=&#cccccc&&&a onmouseover=&javascript:ShowLayers(1,5);&&标题1&/a&&/td&&&& &td id=&title2&&&a onmouseover=&javascript:ShowLayers(2,5);&&标题2&/a&&/td&&&& &td id=&title3&&&a onmouseover=&javascript:ShowLayers(3,5);&&标题3&/a&&/td&&&& &td id=&title4&&&a onmouseover=&javascript:ShowLayers(4,5);&&标题4&/a&&/td&&&& &td id=&title5&&&a onmouseover=&javascript:ShowLayers(5,5);&&标题5&/a&&/td&& &/tr&& &tr&&&& &td height=&100& colspan=&5& bgcolor=&cccccc&&&&div& id=&content1& style=&display:;&&&内容1&&&/div&&&div& id=&content2& style=&display:&&&内容2&&&/div&&&div& id=&content3& style=&display:&&&内容3&&&/div&&&div& id=&content4& style=&display:&&&内容4&&&/div&&&div& id=&content5& style=&display:&&&内容5&&&/div&&&/td&& &/tr&&/table&
正月是农历新年的开始，人们往往将它看作是新的一年年运好坏的兆示期。所以，过年的时候“禁忌”特别多。当然，各个地方的风俗习惯不一样，过年的禁忌也是不一样的。
想不想来一次环球旅行,抛开所有，走到一个陌生的地方，没有人认识，邂逅不同的自己。不管我们是带着什么目的出发的，最后常常能收获一份意外的惊喜。
庞凤山情感处方
庞凤山情感处方
八卦大吐血
请注意使用文明用语
文章总数：0
画报总数：0
画报点击数：0
文章点击数：0一个简单的js定时切换选项卡问题
[问题点数：100分，结帖人gupan2011]
一个简单的js定时切换选项卡问题
[问题点数：100分，结帖人gupan2011]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐：
2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
2010年5月 扩充话题大版内专家分月排行榜第二2009年7月 扩充话题大版内专家分月排行榜第二
2010年11月 Web 开发大版内专家分月排行榜第三
2010年5月 扩充话题大版内专家分月排行榜第二2009年7月 扩充话题大版内专家分月排行榜第二
2010年11月 Web 开发大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。页面导航：
→ 正文内容 js简单的可切换选项卡效果
js实现简单的可切换选项卡效果
这篇文章主要介绍了js实现简单的可切换选项卡效果的方法,涉及javascript操作css样式实现切换选项卡的技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了js实现简单的可切换选项卡效果的方法。分享给大家供大家参考。具体如下：
如图，最简单的纯粹的选项卡
第一步，当然是先写html代码和css样式
&!DOCTYPE html&
&meta charset="gb2312" /&
&title&无标题文档&/title&
body,ul,li{margin:0; padding:0; font:12px/1.5}
ul,li{list-style:}
.wrap{width:500 margin:20}
.hide{display:}
#tab_t{height:25border-bottom:1px solid #}
#tab_t li{float: width:80 height:24
line-height:24 margin:0 4 text-align:
border:1px solid # border-bottom:
background:#f5f5f5; cursor:pointer}
#tab_t .act{ position: height:25
margin-bottom:-1 background:#}
#tab_c{border:1px solid #
border-top: padding:20}
&div class="wrap"&
&ul id="tab_t"&
&li class="act"&选择1&/li&
&li&选择2&/li&
&li&选择3&/li&
&li&选择4&/li&
&div id="tab_c"&
&div&内容1&/div&
&div class="hide"&内容2&/div&
&div class="hide"&内容3&/div&
&div class="hide"&内容4&/div&
第二步，实现简单的切换效果
abc.document.getElementsByTagName("li")
取得abc下面的所有标签为li的元素，返回的是一个元素集合，有数组的一些属性。
要点2：循环，先循环给li加上onclick事件，再onlink事件点击的时候，再循环让所有选项卡的act样式去掉，所有的内容隐藏。然后让所点击的选项及对应内容显示。
tab_t_li[i].index =
在循环时，给选项卡加一个额外的属性并赋值，以做选项卡和内容的对应。
&!DOCTYPE html&
&meta charset="gb2312" /&
&title&无标题文档&/title&
body,ul,li{margin:0; padding:0; font:12px/1.5}
ul,li{list-style:}
.wrap{width:500 margin:20}
.hide{display:}
border-bottom:1px solid #
#tab_t li{
line-height:24
margin:0 4
text-align:
border:1px solid #
border-bottom:
background:#f5f5f5;
cursor:pointer
#tab_t .act{
margin-bottom:-1
background:#
border:1px solid #
border-top:
padding:20
window.onload = function(){
var tab_t = document.getElementById("tab_t");
var tab_t_li = tab_t.getElementsByTagName("li");
var tab_c = document.getElementById("tab_c");
var tab_c_li = tab_c.getElementsByTagName("div");
var len = tab_t_li.
for(i=0; i& i++){
tab_t_li[i].index =
tab_t_li[i].onclick = function(){
for(i=0; i& i++){
tab_t_li[i].className = '';
tab_c_li[i].className = 'hide';
tab_t_li[this.index].className = 'act';
tab_c_li[this.index].className = '';
&div class="wrap"&
&ul id="tab_t"&
&li class="act"&选择1&/li&
&li&选择2&/li&
&li&选择3&/li&
&li&选择4&/li&
&div id="tab_c"&
&div&内容1&/div&
&div class="hide"&内容2&/div&
&div class="hide"&内容3&/div&
&div class="hide"&内容4&/div&
第三步，写成函数。上面的写法只能一个页面用一个选项卡，如果再加一个的话，就需要复制一份，再改很多变量名。
要点：tab_t_li[i][evt] 因为传值的时候是字符串，如果直接写的话就是tab_t_li[i]."onclick"这样话是执行不了的，tab_t_li["onclick"]这样执行没问题。
好了，现在一个页面上就可以有多个切换了，只需要调用函数的时候，写上相应的id名和标签名，事件名称就可以了
&!DOCTYPE html&
&meta charset="gb2312" /&
&title&无标题文档&/title&
body,ul,li{margin:0; padding:0; font:12px/1.5}
ul,li{list-style:}
.wrap{width:500 margin:20}
.hide{display:}
border-bottom:1px solid #
#tab_t li{
line-height:24
margin:0 4
text-align:
border:1px solid #
border-bottom:
background:#f5f5f5;
cursor:pointer
#tab_t .act{
margin-bottom:-1
background:#
border:1px solid #
border-top:
padding:20
window.onload = function(){
tab("tab_t","li","tab_c","div","onmouseover")
function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
var tab_t = document.getElementById(tab_t);
var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
var tab_c = document.getElementById(tab_c);
var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
var len = tab_t_li.
for(i=0; i& i++){
tab_t_li[i].index =
tab_t_li[i][evt] = function(){
for(i=0; i& i++){
tab_t_li[i].className = '';
tab_c_li[i].className = 'hide';
tab_t_li[this.index].className = 'act';
tab_c_li[this.index].className = '';
&div class="wrap"&
&ul id="tab_t"&
&li class="act"&选择1&/li&
&li&选择2&/li&
&li&选择3&/li&
&li&选择4&/li&
&div id="tab_c"&
&div&内容1&/div&
&div class="hide"&内容2&/div&
&div class="hide"&内容3&/div&
&div class="hide"&内容4&/div&
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910