Question

我在一个标签中有一个手风琴，我想在手风琴中创建一个链接，链接到另一个标签中的另一个手风琴。

这是我到目前为止的代码：

＆＃13;

$(function() {
    $(document).ready(function(){
        var getHash = function(key){
            var parts = window.location.hash.substr(1).split(/\|/);
            var _key = parseInt(key) || 0;
            return _key < parts.length ? parts[_key] : false;
        };
        var setHash = function(key, value){
            var parts = window.location.hash.substr(1).split(/\|/);
            var _key = parseInt(key) || 0;
            parts[_key] = value
            window.location.hash = '#' + parts.join('|');
        };
        $(".accordion").accordion({
            heightStyle: "content",
            collapsible: true,
            animated: 'slide',
            navigation: true,
            activate: function(event, ui) {
                if(ui.newHeader.length > 0){
                    // A new accordion panel is open
                    setHash(1, ui.newHeader.parent().children('h3').index(ui.newHeader));
                }else{
                    // In case accordion panel is closed
                    setHash(1, '');
                }
            },
            active: false
        });
        
        $( "#tabs" ).tabs({
            collapsible: true,
            activate: function(event, ui) {
                if(ui.newTab.length > 0){
                    // A new tab is open
                    var tabHash = ui.newTab.parent().children().index(ui.newTab);
                    if(tabHash == getHash(0)){
                        // In case current tab is the one in Hash, we open wanted accordion panel
                        // Make sure to parseInt hash value, because jquery-ui require an integer
                        ui.newPanel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
                    }else{
                        setHash(1,'');
                    }
                    setHash(0, tabHash);
                }else{
                    // In case we close tab, hash is cleared
                    window.location.hash = ''
                }
            },
            create: function(event, ui){
                if(ui.tab.length > 0){
                    var tabHash = ui.tab.parent().children().index(ui.tab);
                    if(tabHash == getHash(0)){
                        // In case current tab is the one in Hash, we open wanted accordion panel
                        // Make sure to parseInt hash value, because jquery-ui require an integer
                        ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
                    }else{
                        setHash(1,'');
                    }
                    setHash(0, tabHash);
                }
            },
            // Make sure to parseInt hash value, because jquery-ui require an integer
            // Remove the " || 0 " if you want all to be closed
            active: parseInt(getHash(0)) || 0
        });
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">

<div id="tabs">
	<ul>
		<li><a href="#tab1">tab1</a></li>
		<li><a href="#tab2">tab2</a></li>
        <li><a href="#tab3">tab3</a></li>
	</ul>
    <div id="tab1">
		<h2>Tab1 Header</h2>
		<div class="accordion">
			<h3>Tab1 Accordion 1</h3>
			<div>
                <p><a href="#tab2">This should take you to tab2</a></p>
            </div>
            <h3>Tab1 Accordion 2</h3>
			<div>
                <p>Tab1 Accordion 2 Content</p>
            </div>
        </div>
    </div>
    <div id="tab2">
		<h2>Tab2 Header</h2>
		<div class="accordion">
			<h3>Tab2 Accordion 1</h3>
			<div>
                <p>Tab2 Accordion 1 Content</p>
            </div>
            <h3>Tab2 Accordion 2</h3>
			<div>
                <p>Tab2 Accordion 2 Content</p>
            </div>
        </div>
    </div>
    <div id="tab3">
		<h2>Tab3 Header</h2>
		<div class="accordion">
			<h3>Tab3 Accordion 1</h3>
			<div>
                <p>Tab3 Accordion 1 Content</p>
            </div>
            <h3>Tab3 Accordion 2</h3>
			<div>
                <p>Tab3 Accordion 2 Content</p>
            </div>
        </div>
    </div>
</div>

＆＃13;

感谢Code-Source提供哈希函数的代码

所以，如果你看一下手风琴1的标签1，你可以看到我创建了一个链接，可以带你到tab2，但它不起作用，只有当我在地址中输入链接时该链接才有效酒吧。知道为什么以及如何修复？

编辑：对不起，我没有在原帖上说清楚，我基本上希望能够使用该哈希链接到另一个标签或另一个标签中的其他手风琴。

由于

Answer 1

您只需使用.trigger('click')事件就可以转到tab2：

$('#gotoTab2').click(function(){
    $(".ui-state-default a[href='#tab2']").trigger('click');
});

gotoTab2 ：<a>标记的ID，可将您带到tab2。

<a id="gotoTab2" href="#tab2">This should take you to tab2</a>

请参阅： Working Fiddle

工作片段：

$(function() {
    $('#gotoTab2').click(function(){
        $(".ui-state-default a[href='#tab2']").trigger('click');
    });
    $(document).ready(function(){
        var getHash = function(key){
            var parts = window.location.hash.substr(1).split(/\|/);
            var _key = parseInt(key) || 0;
            return _key < parts.length ? parts[_key] : false;
        };
        var setHash = function(key, value){
            var parts = window.location.hash.substr(1).split(/\|/);
            var _key = parseInt(key) || 0;
            parts[_key] = value
            window.location.hash = '#' + parts.join('|');
        };
        $(".accordion").accordion({
            heightStyle: "content",
            collapsible: true,
            animated: 'slide',
            navigation: true,
            activate: function(event, ui) {
                if(ui.newHeader.length > 0){
                    // A new accordion panel is open
                    setHash(1, ui.newHeader.parent().children('h3').index(ui.newHeader));
                }else{
                    // In case accordion panel is closed
                    setHash(1, '');
                }
            },
            active: false
        });
        
        $( "#tabs" ).tabs({
            collapsible: true,
            activate: function(event, ui) {
                if(ui.newTab.length > 0){
                    // A new tab is open
                    var tabHash = ui.newTab.parent().children().index(ui.newTab);
                    if(tabHash == getHash(0)){
                        // In case current tab is the one in Hash, we open wanted accordion panel
                        // Make sure to parseInt hash value, because jquery-ui require an integer
                        ui.newPanel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
                    }else{
                        setHash(1,'');
                    }
                    setHash(0, tabHash);
                }else{
                    // In case we close tab, hash is cleared
                    window.location.hash = ''
                }
            },
            create: function(event, ui){
                if(ui.tab.length > 0){
                    var tabHash = ui.tab.parent().children().index(ui.tab);
                    if(tabHash == getHash(0)){
                        // In case current tab is the one in Hash, we open wanted accordion panel
                        // Make sure to parseInt hash value, because jquery-ui require an integer
                        ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
                    }else{
                        setHash(1,'');
                    }
                    setHash(0, tabHash);
                }
            },
            // Make sure to parseInt hash value, because jquery-ui require an integer
            // Remove the " || 0 " if you want all to be closed
            active: parseInt(getHash(0)) || 0
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div id="tabs">
    <ul>
        <li><a href="#tab1">tab1</a></li>
        <li><a href="#tab2">tab2</a></li>
        <li><a href="#tab3">tab3</a></li>
    </ul>
    <div id="tab1">
        <h2>Tab1 Header</h2>
        <div class="accordion">
            <h3>Tab1 Accordion 1</h3>
            <div>
                <p><a id="gotoTab2" href="#tab2">This should take you to tab2</a></p>
            </div>
            <h3>Tab1 Accordion 2</h3>
            <div>
                <p>Tab1 Accordion 2 Content</p>
            </div>
        </div>
    </div>
    <div id="tab2">
        <h2>Tab2 Header</h2>
        <div class="accordion">
            <h3>Tab2 Accordion 1</h3>
            <div>
                <p>Tab2 Accordion 1 Content</p>
            </div>
            <h3>Tab2 Accordion 2</h3>
            <div>
                <p>Tab2 Accordion 2 Content</p>
            </div>
        </div>
    </div>
    <div id="tab3">
        <h2>Tab3 Header</h2>
        <div class="accordion">
            <h3>Tab3 Accordion 1</h3>
            <div>
                <p>Tab3 Accordion 1 Content</p>
            </div>
            <h3>Tab3 Accordion 2</h3>
            <div>
                <p>Tab3 Accordion 2 Content</p>
            </div>
        </div>
    </div>
</div>

Answer 2

这是我的解决方案，点击选项卡上的点击（）;

$("#tabs > ul li a").each(function(){
    var tab = $(this);
    $("#tabs > div a[href="+tab.attr("href")+"]").on("click", function(e) {
        e.preventDefault();
        tab.click();
    });
});

Answer 3

要在其他标签内打开手风琴，首先使用自定义数据属性指定要打开的手风琴的索引，在下面的示例中使用data-accordion-target。

<强> HTML

<div id="tabs">
    <ul>
        <li><a href="#tab1">tab1</a></li>
        <li><a href="#tab2">tab2</a></li>
        <li><a href="#tab3">tab3</a></li>
    </ul>
    <div id="tab1">
        <h2>Tab1 Header</h2>
        <div class="accordion">
            <h3>Tab1 Accordion 1</h3>
            <div>
                <p><a href="#tab2" data-accordion-target="0">This should take you to tab2 accordion 1</a></p>
            </div>
            <h3>Tab1 Accordion 2</h3>
            <div>
                <p><a href="#tab3" data-accordion-target="1">This should take you to tab3 accordion 2</a></p>
            </div>
        </div>
    </div>
    <div id="tab2">
        <h2>Tab2 Header</h2>
        <div class="accordion">
            <h3>Tab2 Accordion 1</h3>
            <div>
               <p><a href="#tab1" data-accordion-target="0">This should take you to tab1 accordion 1</a></p>
            </div>
            <h3>Tab2 Accordion 2</h3>
            <div>
                <p><a href="#tab3" data-accordion-target="0">This should take you to tab3 accordion 1</a></p>
            </div>
        </div>
    </div>
    <div id="tab3">
        <h2>Tab3 Header</h2>
        <div class="accordion">
            <h3>Tab3 Accordion 1</h3>
            <div>
               <p><a href="#tab1" data-accordion-target="1">This should take you to tab1 accordion 2</a></p>
            </div>
            <h3>Tab3 Accordion 2</h3>
            <div>
               <p><a href="#tab2" data-accordion-target="1">This should take you to tab2 accordion 2</a></p>
            </div>
        </div>
    </div>
</div>

使用jQuery trigger导航到所需的选项卡，并在设置哪个手风琴选项处于活动状态时重新加载该选项卡的手风琴。

在下面的示例中，代码中的添加内容是用于选项卡手风琴

中的一组内部链接

        $(function() {
            $(document).ready(function(){
                var getHash = function(key){
                    var parts = window.location.hash.substr(1).split(/\|/);
                    var _key = parseInt(key) || 0;
                    return _key < parts.length ? parts[_key] : false;
                };
                var setHash = function(key, value){
                    var parts = window.location.hash.substr(1).split(/\|/);
                    var _key = parseInt(key) || 0;
                    parts[_key] = value;
                    window.location.hash = '#' + parts.join('|');
                };
                $(".accordion").accordion({
                    heightStyle: "content",
                    collapsible: true,
                    animated: 'slide',
                    navigation: true,
                    activate: function(event, ui) {
                        if(ui.newHeader.length > 0){
                            // A new accordion panel is open
                            setHash(1, ui.newHeader.parent().children('h3').index(ui.newHeader));
                        }else{
                            // In case accordion panel is closed
                            setHash(1, '');
                        }
                    },
                    active: false
                });

                $( "#tabs" ).tabs({
                    collapsible: true,
                    activate: function(event, ui) {
                        if(ui.newTab.length > 0){
                            // A new tab is open
                            var tabHash = ui.newTab.parent().children().index(ui.newTab);
                            if(tabHash == getHash(0)){
                                // In case current tab is the one in Hash, we open wanted accordion panel
                                // Make sure to parseInt hash value, because jquery-ui require an integer
                                ui.newPanel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
                            }else{
                                setHash(1,'');
                            }
                            setHash(0, tabHash);
                        }else{
                            // In case we close tab, hash is cleared
                            window.location.hash = '';
                        }
                    },
                    create: function(event, ui){
                        if(ui.tab.length > 0){
                            var tabHash = ui.tab.parent().children().index(ui.tab);
                            if(tabHash == getHash(0)){
                                // In case current tab is the one in Hash, we open wanted accordion panel
                                // Make sure to parseInt hash value, because jquery-ui require an integer
                                ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
                            }else{
                                setHash(1,'');
                            }
                            setHash(0, tabHash);
                        }
                    },
                    // Make sure to parseInt hash value, because jquery-ui require an integer
                    // Remove the " || 0 " if you want all to be closed
                    active: parseInt(getHash(0)) || 0
                });
            });
    ////////////////////////Addition to your code/////////////////////
     var internalLinks = $(".accordion").find("a");
     $.each(internalLinks,function(i,v){
      $(v).on('click',function(e){
        var h3Index = parseInt($(v).attr("data-accordion-target"));
        e.preventDefault();
        var id = $(v).prop("href").split("#")[1];
        $("li").find("a[href=#"+id+"]").trigger("click");     
        //$($( "#"+id).find("h3")[h3Index]).trigger("click");
        $( "#"+$(v).prop("href").split("#")[1]).find(".accordion").accordion('option','active', h3Index);
       }); 
     });
    /////////////////////////////////////////////////////////////////////
        });

http://jsbin.com/qebocevete/edit?html,js,output

链接到手风琴中的另一个选项卡，嵌入式链接将无法正常工作

3 个答案: