1

我正在将此脚本用于 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 的第一个问题，我已经进行了广泛的搜索。

我真的很感谢所有的帮助。这是一个很棒的社区。

更新：

好的，这是我的完整代码的编辑：

<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>

4

2 回答 2

0

为了使选项卡内容中的链接强制选项卡切换，有助于了解幕后发生的事情以使它们默认切换。

默认情况下，鼠标悬停事件会强制选项卡更改；因此，解决方案是通过将事件绑定到选项卡内容中的超链接来覆盖相关超链接的默认单击事件：

将此代码包含在您在问题中显示的 JavaScript 代码之后，在 $(document).ready 内：

$('.tabcontent').find('a').click(function() {
    event.preventDefault();
    $('.tabs #' + $(this).attr("rel")).mouseover();
});

event.preventDefault() 防止超链接尝试重定向到在 href 属性中输入的页面，而 rel 属性用作将超链接绑定到链接到的特定选项卡的一种方式。

rel 属性用于获取选项卡的 id 值，因此我们可以通过编程方式调用其 mouseover 事件并切换选项卡。

<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。

于 2012-05-21T02:42:37.943 回答
0

它根据您的要求工作

只需添加

        <div class="tabs">
             <div class="tab selected first" id="tab_menu_1">
                 <div class="link">JavaScript</div>
                 <div class="arrow"></div>
             </div>
        </div>

在任何选项卡中

转到此链接http://jsfiddle.net/ipsjolly/ssR5f/

选项卡中有一个类似的选项3rd卡，我们可以通过它跳转到1st选项卡。

于 2012-05-21T07:08:32.043 回答