我正在将此脚本用于 jQuery 垂直选项卡。
http://www.scriptbreaker.com/javascript/script/JQuery-vertical-tab-menu
<script language="JavaScript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").hover(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
这是选项卡(链接)的 HTML
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">CSS</div>
<div class="arrow"></div>
</div>
<div class="tab last" id="tab_menu_3">
<div class="link">JQuery</div>
<div class="arrow"></div>
</div>
</div>
我正在尝试创建从选项卡内容到另一个选项卡的附加链接。
这样我就可以链接到下一个选项卡或最后一个选项卡,保持与当前选项卡链接相同的功能(无需刷新)
这是我在 stackoverflow 上的第一个问题,我已经进行了广泛的搜索。
我真的很感谢所有的帮助。这是一个很棒的社区。p>
更新:
好的,这是我的完整代码的编辑:
<script type="text/javascript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").click(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
<div class="curvedContainer">
<div class="tabcontent" id="tab_content_1" style="display:block">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_2">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_3">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_4"><h2 class="wwd_title">
<p>text</p>
</div>
</div>
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">Onefish</div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">Twofish</div>
</div>
<div class="tab" id="tab_menu_3">
<div class="link">Redfish</div>
</div>
<div class="tab last" id="tab_menu_4">
<div class="link">Bluefish</div>
</div>
</div>
最佳答案
为了使选项卡内容中的链接强制选项卡切换,有助于了解幕后发生的情况以使它们默认切换。
默认情况下,鼠标悬停事件会强制选项卡发生更改;因此,解决方案是通过将事件绑定(bind)到选项卡内容中的超链接来覆盖相关超链接的默认单击事件:
将此代码包含在您在问题中显示的 JavaScript 代码之后,位于 $(document).ready 内:
$('.tabcontent').find('a').click(function() {
event.preventDefault();
$('.tabs #' + $(this).attr("rel")).mouseover();
});
event.preventDefault() 可防止超链接尝试重定向到在 href 属性中输入的页面,并且 rel 属性用于将超链接绑定(bind)到所链接的特定选项卡。
rel 属性用于获取选项卡 id 的值,以便我们可以通过编程方式调用其鼠标悬停事件并切换选项卡。
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">CSS</div>
<div class="arrow"></div>
</div>
<div class="tab last" id="tab_menu_3">
<div class="link">JQuery</div>
<div class="arrow"></div>
</div>
</div>
<div class="curvedContainer">
<div class="tabcontent" id="tab_content_1" style="display:block">content for tab 1 <a href="#" rel="tab_menu_2"> tab2</a></div>
<div class="tabcontent" id="tab_content_2">content for tab 2</div>
<div class="tabcontent" id="tab_content_3">content for tab 3</div>
</div>
在选项卡的 HTML 内容中,只需像平常一样使用 href="#"和 rel 属性包含超链接即可。 rel 属性必须等于目标选项卡的 ID,在本例中为 tab_menu_2。
关于javascript - JQuery 垂直选项卡 - 创建选项卡的附加链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10677613/