如何从选项卡外部的链接打开 jquery 选项卡？

Question

我在互联网上找到了一个不错的标签系统（link 到标签系统），让用户可以浏览我的网站。但是我在编码方面并不是那么好。我以某种方式设法让事情正常进行。

我正在尝试/调整两天以使其正常工作。记录到此代码中，我将能够创建一个打开指定选项卡的链接。你怎么能创建一个链接——当点击它时——会打开指定的选项卡。

此代码可以解决问题，但不知道如何在我现有的 Javascript 代码中实现此代码。

代码：

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

在website找到此代码

HTML 代码：

<div id="tabs">

    <ul>
        <li><a class="active" href="#tab1">HOME</a></li>
        <li><a href="#tab2">SERVICES</a></li>
        <li><a href="#tab3">OPTIONS</a></li>
            <li><a href="#tab4">ABOUT US</a></li>
            <li><a href="#tab5">CONTACT US</a></li>
    </ul><!-- //Tab buttons -->

    <div class="tabDetails">
        <div id="tab1" class="tabContents">
                <h1>Title1</h1>
                <iframe src="Home.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab1 -->
        <div id="tab2" class="tabContents">
                <h1>Title2  </h1>
                <h2>  </h2>
                <h3>  </h3>
                <iframe src="Services.html" width="1150" height="640" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab2 -->
        <div id="tab3" class="tabContents">
               <h1>Title3</h1>
               <iframe src="Options.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab3 -->
        <div id="tab4" class="tabContents">
            <h1>Title4 </h1>
            <iframe src="Aboutus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab4 -->
        <div id="tab5" class="tabContents">
            <h1>Title5</h1>
           <iframe src="Contactus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
        </div><!-- //tab5 -->
    </div><!-- //tab Details -->
</div><!-- //Tab Container -->

CSS：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tab</title>
<style type="text/css">
*{margin:10; padding:0;}

body{

    font:normal 14px/1.5em Arial, Helvetica, sans-serif;
}
a{outline:none;}

#tabs{
    background:#f0f0f0;
    border:1x solid #fff;
    margin:100px auto;
    padding:20px;
    position:absolute;
    width:1315px;
}
    #tabs ul{
        overflow:hidden;
        border-left:0px solid #fff;
        height:80px;
        position:center;
        z-index:100;
    }
    #tabContaier li{
        float:left;
        list-style:none;
    }
    #tabs li a{
        background:#ddd;
        border:3px solid #ffff;
        border-left:0;
        color:#666;
        cursor:pointer;
        display:block;
        height:35px;
        line-height:35px;
        padding:0 98px;
        text-decoration:none;
        text-transform:bold;
    }
    #tabs li a:hover{
        background:#fff;
    }
    #tabs li a.active{
        background:#fbfbfb;
        border:px solid #fff;
        border-right:px;
        color:#333;
    }
    .tabDetails{
        background:#fbfbfb;
        border:1px solid #fff;
        margin:34px px;
    }
    .tabContents{
        padding:px

}
    .tabContents h1{
        font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
        padding:0 0 px;
                                width:auto;



</style>

JAVASCRIPT 代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$( ".selector" ).tabs( "refresh" );

    // Hide all tab conten divs by default
    $(".tabContents").hide(); 

    // Show the first div of tab content by default
    $(".tabContents:first").show(); 

    //Fire the click event
    $("#tabContaier ul li a").click(function(){ 

        // Catch the click link
        var activeTab = $(this).attr("href"); 

        // Remove pre-highlighted link
        $("#tabContaier ul li a").removeClass("active"); 

        // set clicked link to highlight state
        $(this).addClass("active");         

        // hide currently visible tab content div
        $(".tabContents").hide(); 

        // show the target tab content div by matching clicked link.
        $(activeTab).fadeIn(); 
 return false;


    });
});
</script>

Answer 1

您的问题是您选择了具有不同 jquery 选项卡的选项卡。使用此 Javascript 函数更改选定的选项卡。

function selectTab(tabIndex) {
    var selector = "a[href='#tab" + tabIndex + "']";
    var tab = "#tab" + tabIndex;
    $("#tabContaier ul li a").removeClass("active");
    $(selector).addClass("active");
    $(".tabContents").hide();
    $(tab).fadeIn();
}

链接：

<a href="#" onclick="selectTab(2);" >Go to tab 2</a>

如果您使用与现在相同的链接命名法，这将起作用（href 用于链接为“tab1，tab2”等，以及名为“tab1，tab2”等的 div... 祝你好运。

Answer 2

看起来您过于复杂了，并试图重新创建 JQuery UI 选项卡的操作。您可以消除除初始选项卡创建和单击事件之外的所有内容。您发布的其他 JS 中唯一可能实际执行任何操作的部分是 fadeIn() 至于样式，不要分配和删除活动类，请使用 .ui-tabs-active 类。设置 li 的背景颜色，而不是 a 或您的 a 样式将覆盖 li.ui-tabs-active 并且即使在悬停/选择时它们也会保持灰色。请参阅此处的示例：

在此处查看小提琴演示：http://jsfiddle.net/webchemist/Dpg2W/

还有一些 CSS 错误：

 #tabs li a.active{
        background:#fbfbfb;
        border:px solid #fff;
        border-right:px; /*no numeric value given for # of pixels*/
        color:#333;
}

.tabDetails{
        background:#fbfbfb;
        border:1px solid #fff;
        margin:34px px; /*no numeric value given for # of pixels in 2nd value*/
}

.tabContents{
        padding:px /*no numeric value given for # of pixels*/
}

.tabContents h1{
        font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
        padding:0 0 px;
                                width:auto;

/*no closing brace for .tabContents h1*/

</style>