基于jQuery实现的标签页

最近在看OpenCart中的样式布局的时候学着弄了一个标签页的实现,做完之后才发现jQuery UI中已经有标签页的实现了,实现的方式也大致相同。

下面是我的实现,贴在下面以备未来使用。

HTML页面:


CSS样式 style.css:


jQuery操作 tabs.js:


实现的要点在于:

1. 初始时需要用jQuery的 hide() 函数将不需要显示的标签页隐藏。(hide() 函数实际上是将元素的属性设置为:style="display: none;"。)

2. 标签采用<a>元素,通过它的 href 属性,结合 jQuery 的选择器来定位标签页元素的 id。

3. 被选中的标签拥有特定的class,“selected”。通过这个class="selected",结合 jQuery 的hasClass方法来确定哪个标签页该显示。

4. 在 jQuery 的click事件的处理函数中添加参数event,然后在函数体中使用event.preventDefault() 函数,并不会调用DOM本身的event以及event.preventDefault() 函数,而是会调用jQuery提供的preventDefault() 函数,从而达到在不同浏览器中都能阻止浏览器默认操作的目的。这样做的原因是Fire Fox不支持的DOM的event对象,而IE的event又没有preventDefault函数,这就使得单独使用event.preventDefault() 函数只会在Chrome中有效。

你可能感兴趣的:(jquery)