javascript - 能用html5的data=*自定义属性去对应元素的id做隐藏显示？

问题描述

问 题

data自定义属性可以做这个隐藏显示吗？

          <div class="al-item-tabs" id="tabAutoTrigger">
              <a  class="tips market scr-tip-change" href="javascript:void(0);"  data-rel="tabAutoPlay1"></a>
              <b class="tabs-line"></b>
              <a   class="tips shop" href="javascript:void(0);"  data-rel="tabAutoPlay2"></a>
              <b class="tabs-line"></b>
              <a   class="tips mall" href="javascript:void(0);" data-rel="tabAutoPlay3"></a>
              <a   style="display: none;" href="javascript:void(0);" data-rel="tabAutoPlay4"></a>
              <a   style="display: none;" href="javascript:void(0);" data-rel="tabAutoPlay5"></a>
          </div>

<div id="tabAutoPlay1"  style="display:block;"></div>
<div id="tabAutoPlay2"  style="display:none;"></div>
<div id="tabAutoPlay3"  style="display:none;"></div>


知道的大神，希望能提供个玩具代码看看。

解决方案

看了下目前仅有的一个答案，上来就修正，data-* 是 jquery 的。我就奇怪了，自定义属性和 jquery 有什么必然联系？不要误导人好么。。。 =.=

手机码代码麻烦，一会补充回答问题。

到公司了，补充一下吧，在期望的 trigger 上监听事件（当然如果比较多就在父元素上做 delegate），然后 getAttribute 通过期望的 data 属性获取到目标（当然最好这个功能做成可配置的），然后 querySelector（当然你这里是 id 就直接 getElementByID 了）找到目标并修改样式，修改样式的部分可以添加删除 class 的方法来完成，以方便之后扩展到 css3 的动画（当然用 JS 动画的可以无视）。

这篇关于javascript - 能用html5的data=*自定义属性去对应元素的id做隐藏显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！