Javascript JQuery垂直选项卡-创建指向选项卡的附加链接

我将此脚本用于jQuery垂直选项卡

$（文档）.ready（函数（）{
$（“.tabs.tab[id^=tab\u菜单]”）。悬停（函数（）{
var curMenu=$（此）；
$（“.tabs.tab[id^=tab_菜单]”）.removeClass（“选定”）；
curMenu.addClass（“选定”）；
var index=curMenu.attr（“id”）.split（“选项卡菜单”）[1]；
$（.curvedContainer.tabcontent”）.css（“显示”、“无”）；
$（“.curvedContainer”选项卡内容+索引）.css（“显示”、“块”）；
});
});

以下是选项卡（链接）的HTML

JavaScript
CSS
JQuery

我正在尝试创建一个从选项卡内容到另一个选项卡的附加链接

这样我就可以链接到下一个选项卡或上一个选项卡，保持与当前选项卡链接相同的功能（无刷新）

这是我关于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>  

$（文档）.ready（函数（）{
$（“.tabs.tab[id^=tab\u菜单]”）。单击（函数（）{
var curMenu=$（此）；
$（“.tabs.tab[id^=tab_菜单]”）.removeClass（“选定”）；
curMenu.addClass（“选定”）；
var index=curMenu.attr（“id”）.split（“选项卡菜单”）[1]；
$（.curvedContainer.tabcontent”）.css（“显示”、“无”）；
$（“.curvedContainer”选项卡内容+索引）.css（“显示”、“块”）；
});
});
文本

正文

正文

文本

一条鱼
双鱼
红鱼
蓝鱼

---

为了使选项卡内容中的链接强制选项卡切换，了解引擎盖下发生的情况有助于在默认情况下使它们切换

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

在问题中显示的JavaScript代码之后，在$（文档）中包含此代码。准备好了吗：

$('.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>

JavaScript
CSS
JQuery
表1的内容
表2的内容
表3的内容

---

在选项卡的HTML内容中，只需使用href=“#”和rel属性像平常一样包含超链接。rel属性必须等于目标选项卡的id，在本例中为tab_menu_2。

它根据您的要求工作。

加上

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

JavaScript

在任何选项卡中

转到此链接

---

在

3rd

选项卡中有一个类似的选项卡，我们可以通过该选项卡跳转到

1st

选项卡。

请发布您迄今为止尝试实现的代码。（您发布的代码是垂直选项卡菜单代码。）作为旁注，正确的脚本标记应该类似于

。“语言”属性已过时，可能无法保证您的浏览器将使用最新版本的JavaScript。@谢谢。已添加完整代码。感谢您的回答。好吧，我试过了，但没用。也许我添加的脚本不正确。不管怎样，我都用完整的代码更新了我的问题。我得到了使用现有类在另一个类中粘贴选项卡的概念，但这不是我想要做的。非常感谢。

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

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