<div id="item1" class="mui-control-content">
<div id="item2" class="mui-control-content">
<div id="item3" class="mui-control-content">
默认是item1, 我通过参数,可能1,也可能2,或3.如果做到?
我通过?id=123#item2 让该页面默认高亮(选择效果),传递没有效果
请问应该如何传递参数 能默认 item2 ,谢谢.
stock2
- 发布：2015-04-08 10:46
- 更新：2015-04-08 18:18
- 阅读：2193
tab-with-segmented-control.html 根据item激活问题
分类：MUI
19 个回复
DCloud_UNI_FXY
内容区域也同样加上mui-active样式
豆豆xiao宽 - 静静的看着这个世界，最后终于疯了
根据id取到div 赋css 应该是那个mui-active的样式
stock2 (作者)
井号item2 这种方式不行啊. 不是根据锚点实现的吗?
感谢楼上的
stock2 (作者)
暂时用豆豆的方法实现了.每个加id,然后根据参数赋值.激活
document.getElementById("itm"+item).className="mui-control-item mui-active";
有更好的方法吗? 呵呵
stock2 (作者)
晕,还是问题啊.
激活选中一回事(通过class 能够激活了). 问题下面显示的内容还是默认第一个的.
请问,如何真正激活,让显示的内容也是item2的项. 谢谢啊.
就是说
1.通过参数 ,直接能定位到item2.显示内容也是item2相当于,点击了.
2.加载后,再点击了item ,如果判断点击了2或3或1 ? 这里需要对应初始化内容.
谢谢 啊 大神.
stock2 (作者)
谢谢楼上 . 对的. 晕,没仔细看 .对应item是有 mui-active
最后一个问题.
加载后,再点击了item ,如果判断点击了2或3或1 ? 这里需要对应初始化内容.
DCloud_UNI_FXY
目前你可以先这么用。事件名后续可能会调整：
stock2 (作者)
Cannot call method 'addEventListener'
和位置无关哦
现在通过js 赋值classname= 现在有个bug了.
就是item2 传值进来了, 页面默认 item2, 菜单也是item2 ,再选择其他1,3时, item2会再次出现.
测试下来,发现 是mui-active 导致, 但默认的 为何没有问题?
请问 是用classname 来赋值吗?
DCloud_UNI_FXY
1.我贴的代码是演示代码。注释里边说了。监听该事件的元素是你内容区的父DIV，你给该DIV加上那个id就行了。
2.如果className。那就是className="mui-control-content mui-active";同时需要确保其他item和content不包含mui-active。也就是说，同时只能允许一个是mui-active
stock2 (作者)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<header id="header" class="mui-bar mui-bar-nav">
<span id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted">
<a id="itm1" class="mui-control-item" href="#item1">待办</a>
<a id="itm2" class="mui-control-item" href="#item2">已办</a>
<a id="itm3" class="mui-control-item" href="#item3">全部</a>
</span>
</header>
<div style="margin: 45px 0px 0px 0px;">
<div id="item1" class="mui-control-content">1111</div>
<div id="item2" class="mui-control-content">222</div>
<div id="item3" class="mui-control-content">3333</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
if(window.plus){plusReady();}else{document.addEventListener('plusready',plusReady,false);}
function plusReady(){
item=2;
console.log("a:"+item);
document.getElementById("segmentedControlContents").addEventListener('shown.mui.tab', function(e) {console.log(e.detail.tabNumber);});
document.getElementById("itm"+item).className="mui-control-item mui-active";
document.getElementById("item"+item).className="mui-control-item mui-active";
</script>
stock2 (作者)
以上代码 导致 222会跟随出现.
是不是 点击后,再轮回去除一遍 mui-active?
监控不到事件: Cannot call method 'addEventListene' of null
DCloud_UNI_FXY
请仔细看我的回复：
1.我贴的代码是演示代码。注释里边说了。监听该事件的元素是你内容区的父DIV，你给该DIV加上那个id就行了。
2.如果className。那就是className="mui-control-content mui-active";同时需要确保其他item和content不包含mui-active。也就是说，同时只能允许一个是mui-active
stock2 (作者)
看了一遍又一遍了. //segmentedControl 我知道了 是span的id .
2.我代码贴出来了,默认我全部去除了 mui-active
获得参数后我,指定了 菜单和内容为 mui-active,就是说 就一个激活了, 都很正常.
但再次点击菜单就乱了.
DCloud_UNI_FXY
1.我说的是内容区的父容器的id。也就是你的<div style="margin: 45px 0px 0px 0px;">这个div加上个id。然后监听它的事件
stock2 (作者)
谢谢楼上的DCloud_MUI_FXY 老师.
麻烦老师 看看,我贴出来的 .为什么 222跟随啊?
再次感谢.
监听的我去试试.
stock2 (作者)
监听的出来了. 呵呵. 对应值为0,1,2 . 谢谢.
stock2 (作者)
但混乱的还是没有办法解决.
我贴的代码 基本最精简了. 烦请帮忙看看.
老师能看下问题在哪里吗?
如果初始化item=2 ,再 选择1,或3 后,就乱了.
stock2 (作者)
第一个 为 mui-control-item
第二个为 mui-control-content
好像这里,我再测试下.
stock2 (作者)
就是这个问题,结贴了. 菜单对应的和下面显示 是2个区域 class 名.