tab切换传参版本

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>tab</title>
 6     <style>
 7     *{
 8         margin: 0;
 9         padding: 0;
10     }
11     #title{
12         width: 306px;
13         overflow: hidden;
14         margin: 50px auto 0px;
15     }
16     #title h2{
17         width: 100px;
18         height: 30px;
19         border: 1px solid #000;
20         font-size: 30px;
21         text-align: center;
22         line-height: 30px;
23         float: left;
24     }
25     #con{
26         width: 304px;
27         border: 1px solid #000;
28         height: 200px;
29         margin: 0 auto;
30     }
31     #con li{
32         width: 304px;
33         height: 200px;
34         font-size: 40px;
35         color: #ccc;
36         line-height: 200px;
37         text-align: center;
38         list-style: none;
39         display: none;
40     }
41     .select{
42         background: #ccc;
43     }
44     #con .show{
45         display: block;
46     }
47     </style>
48 </head>
49 <body>
50     <div id="title">
51         <h2 class="select" onclick="tab(0)">标题一</h2>
52         <h2 onclick="tab(1)">标题二</h2>
53         <h2 onclick="tab(2)">标题三</h2>
54     </div>
55     <ul id="con">
56         <li class="show">内容一</li>
57         <li>内容二</li>
58         <li>内容三</li>
59     </ul>
60 </body>
61 <script>
62     var title=document.getElementById(‘title‘);
63     var hs=title.getElementsByTagName(‘h2‘);
64     // alert(hs.length);
65     var con=document.getElementById(‘con‘);
66     var lis=con.getElementsByTagName(‘li‘);
67 /*    function tab(a) {
68         for (var i = 0; i < hs.length; i++) {
69             hs[i].className=‘‘;
70             lis[i].className=‘‘;
71         };
72         hs[a].className=‘select‘;
73         lis[a].className=‘show‘;
74     };*/
75
76     function tab(a) {
77         for (var i = 0; i <hs.length; i++) {
78             hs[i].className=‘‘;
79             lis[i].className=‘‘;
80         };
81         hs[a].className=‘select‘;
82         lis[a].className=‘show‘;
83     };
84
85 /*    hs[0].onclick=function() {
86         for (var i = 0; i < hs.length; i++) {
87             hs[i].className=‘‘;
88             lis[i].className=‘‘;
89         };
90         ha[0].
91     };*/
92 </script>
93 </html>
时间: 2024-11-03 16:46:59

tab切换传参版本的相关文章

多个tab切换传参

var _ =peopleslive.h5; _.main=function(){ //集赞排名1 $('#tab1 .tab_nav').find('li').click (function() { tabPage($('#tab1'),$(this)); }); //集赞排名2 $('#tab2 .tab_nav').find('li').click (function() { tabPage($('#tab2'),$(this)); }); function tabPage(obj,obj

iOS 多视图—视图切换之代码块传参切换

在iOS设计中 ,视图在切换的时候同时能传参数到下一个视图页面的方法特别多,这里就以代码块实现传参的方法 FirstViewController.h #import <UIKit/UIKit.h> //声明代码块 typedef void (^PostValueBlock) (NSString *Info); @interface FirstViewController : UIViewController<UITextFieldDelegate> @property(strong

JS函数传参实例应用:多组图片切换实例

之前的博客有一个图片切换的例子,实现了简单轮播图的点击切换的案例,今天就说一下多组轮播切换,前提是布局差不多,通过函数传参的形式减少代码应用,但是同时还能实现效果.先来看一下之前那个例子的实现图片: 那么今天我来实现两组这样的图片切换,通过传参数来实现,这样分可以减少js代码: <div class="box" id="pic1"> <img src="" /> <span>数量正在加载中--</span

vue:解决使用param传参后,再次刷新页面会新增一个原有的tab

问题:在最近的项目中,我通过传递不同的参数,复用同一组件进行渲染,然而意外出现一个bug,就是当我重新刷新该页面时,会新增一个tab 原来的: 刷新页面后: 查阅资料后,发现该现象是由于通过params进行传递的参数引起的,params进行传参后再次刷新页面,参数丢失,导致fullpath不一致,从而新增了页面(而我使用的d2admin基于element-ui第三方框架) 解决方案:将params方式传参改为使用query传参,这样参数就不会因为刷新而丢失 参考: https://juejin.

数据类型回顾——函数传参之商品价格计算—JS学习笔记2015-6-6(第50天)

经常我们可以看到很多网站会有多个相同功能的模块,比如淘宝首页的轮播,比如新浪首页的tab切换: 那么可以看出这些地方在HTML结构上是类似的,所以我们可以考虑用一块功能代码去实现,而不同是仅仅是传递参数的不同: 例如: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

Tab切换效果(多个参数)

前几天我写了这个切换效果,但是是只传一个值的函数,经过各位大牛的指点发现还是有些问题的,于是经过我不懈的努力,完善了代码: 传递多个参数替代函数里面包含事件这个问题: html代码: 1 <div class="content"> 2 <div class="tab1 cf"> 3 <ul> 4 <li class="tab_li">第一项</li> 5 <li class=&qu

02-方法传参和初始化与垃圾回收清除

1.方法参数传值 1.1 方法传参 方法参数分为三种:1,基本类型; 2,String类型;3,引用类型. 实例如下: public void changeParam(int i,String str,StringBuilder sb,StringBuilder sb2){ i=1; str="1"; sb.append("1"); sb2=new StringBuilder("1"); } @Test public void change(){

uploadify的用法与动态传参 提供demo下载

---恢复内容开始--- 官网:http://www.uploadify.com/   一款不错的上传插件.官方文档http://www.uploadify.com/documentation/ 用法网上很多.今天快乐我在项目中想动态的穿选择,然后上传,同时服务器端,接受到参数与图片的地址.可是uploadify,直接是获取到,页面才加载的值.所以搜了一下.找到的办法.但都是旧版本的.今天我来写个新3.21版本. 要点     1.关闭自动上传.红色地方 $('#upload').uploadi

用angularjs做简单的tab切换

用angularjs做简单的tab切换: 页面部分 <div> <div id="tabs" ng-controller="TabsCtrl"> <ul> <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.t