如何在一个页面上切换多个tabSlideOUt选项卡
How to toggle multiple tabSlideOUt tabs on one page
我需要以类似的方式使用多个tabSlideOUt
源其中一个页面,如Fiddle示例
我需要在标签之间切换,一次只能打开一个标签
$(function () {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: 'http://www.gac.com/upload/GAC2012/images/facebook_icon_50x50.png', //path to the image for the tab (optionaly can be set using css)
imageHeight: '50px', //height of tab image
imageWidth: '50px', //width of tab image
tabLocation: 'right', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '50px', //position from the top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
我通过对HTML进行一些更改并使用更新的js来解决这个问题。使用js的一个是在小提琴,否则可能会打破。
http://fiddle.jshell.net/zy62umw5/1/<div class="slide-out-div tab"> <a class="handle" href="http://link-for-non-js-users">Content</a>
<h3>Contact me</h3>
<a href="mailto:wpaoli@gmail.com">wpaoli@gmail.com</a>
<br />
<br />
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
<div class="slide-out-div tab2"> <a class="handle" href="http://link-for-non-js-users">Content</a>
<h3>Contact me</h3>
<a href="mailto:wpaoli@gmail.com">wpaoli@gmail.com</a>
<br />
<br />
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
<div class="slide-out-div tab3"> <a class="handle" href="http://link-for-non-js-users">Content</a>
<h3>Contact me</h3>
<a href="mailto:wpaoli@gmail.com">wpaoli@gmail.com</a>
<br />
<br />
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
相关文章:
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- 如何在选项卡上定义属性'的主窗口对象
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 使用此选项选择父类内部的类
- CKeditor:更改对话框中的默认选择选项
- JQuery覆盖不更改单选选项
- 活动选项卡's源代码-获取变量s值
- 绑定时将Parsley minlength消息作为选项传递时,未对其进行自定义
- 如何从选择框中的选项中获取属性值
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- 如何从外部页面激活非默认引导选项卡
- 如何在一个页面上切换多个tabSlideOUt选项卡