Question

我正在使用Fancy Sliding Form ..演示Click here：

底部有一些用于导航的标签/按钮。

当我用鼠标单击选项卡上没有直接链接时，我需要能够触发不同的步骤（自动点击）。

我尝试在每个步骤中添加一个ID，然后创建一个链接：Next标签那么下面的jquery：

<script>
$("#mytrigger").click(function(e) {
 e.preventDefault();
 $("#step2").trigger("click");
});
</script>

但这没效果。

更新：

我把它放在一起，它不起作用......我不是这样做的吗？

<a class="mytrigger" href="#">Click Here</a>
<script>
$('a.mytrigger').click(function(e){
$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
e.preventDefault();
});
</script>

这是我的导航：

<div id="navigation" style="display:none;">
<ul>
<li class="selected">
<a href="#">Step 1</a>
</li>
<li>
<a href="#">Step 2</a>
</li>
<li>
<a href="#">Step 3</a>
</li>
<li>
<a href="#">Step 4</a>
</li>
<li>
<a href="#">Step 5</a>
</li>
<li>
<a href="#">Step 6</a>
</li>
</ul>
</div>

Answer 1

我真的无法测试这个，但这应该有效（基于插件的来源）：

$('a.mytrigger').click(function(e){ $('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click(); e.preventDefault(); });

'current'var在sliding.form.js

中定义

编辑：
好吧，我错了，抱歉。这是一个有效的演示：http://jsfiddle.net/dCmA7/1/
（完整尺寸：http://jsfiddle.net/dCmA7/1/embedded/result/）

为了使事情尽可能简单，您不必修改导航像这样创建你的链接：
a href="#step1" class="mytrigger">link

然后添加此javascript：

$("a.mytrigger").click(function(e){  
    var index = $(this).attr("href").substr(5);  
    $('#navigation li:nth-child('+parseInt(index)+') a').click();  
    e.preventDefault();  
});

Answer 2

我认为使用较少的HTML可以更轻松地解决您的问题。看看my fiddle。

一点解释：

我正在创建链接onload usig $（function（））方法。我找到了所有“li”项目，我正在添加“next”，“prev”链接。最后，我从第一个项目中删除“prev”链接，从最后一个项目中删除“next”链接。这样我就不需要自己不断创建HTML元素了。
我添加的每个链接，我标识为“下一个”或“上一个”类。
我使用“live”进行绑定（您可能需要使用“on”。语法可能略有不同）

使用“live”方法我在每个链接上附加“click”事件。处理程序根据我之前附加的“next”/“prev”类对每个链接进行操作。对于“下一个”类，我使用JQuery中的“next”函数来获取下一个“li”元素。对于“prev”类，我使用JQuery中的“prev”函数来获取前一个“li”元素。

请注意，在我调用“prev”或“next”函数之前，我确保引用包含链接的“li”对象。为此我在$（this）
上使用“closest('li')”调用
如果您需要更多内容，请告诉我。

Javascript JQuery Script按代码单击链接（滑动表单脚本）

2 个答案: