1

如何创建将扩展特定手风琴部分的链接，然后滚动到该部分中的特定 DIV？

我正在使用最新的 jQuery UI 库以及 jquery.multi-accordion-1.5.3.js，并为 IE8 或更高版本开发

我已经能够成功地实现 multiAccordion 并且通过解析查询字符串我可以操作要扩展的部分，并滚动到第一个哈希锚。

奇怪的是，这似乎只适用于第一个链接，对于任何其他链接它滚动过去相应的哈希锚点，并且总体上它的行为不规律。

我遇到了一些线程，提到 IE 在识别这样的查询字符串中的哈希锚时遇到问题index.php?page=page1#section3，即……为什么 Internet Explorer 不支持同时带有查询字符串和哈希/锚的书签？Firefox 工作正常，但我还没有遇到一个解决方案...

有没有人对此有解决方案？有什么选择吗？

这是我的代码（或者如果它对您来说更清晰 - 使用相同代码的小提琴http://jsfiddle.net/3QSmq/1/）

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"     "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery UI Multi Open Accordion</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.9.custom/jquery-ui-1.8.9.custom.css" />
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>  
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="jquery.multi-accordion-1.5.3.js"></script>
<style type="text/css">
    /*demo page css*/
    body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
</style>    
</head>
<body>
<a href="index.html?page=tab2#something">SOMETHING</a><br />
<a href="index.html?page=tab3#something1">SOMETHING1</a>
<div id="multiAccordion">
    <h3><a href="#" id="tab1">tab 1</a></h3>
    <div>Text here
    </div>
    <h3><a href="#" id="tab2">tab 2</a></h3>
    <div>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
    <p id="something" style="color:red">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
    </p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.

    </div>
    <h3><a href="#" id="tab3">tab 3</a></h3>
    <div>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
    <p id="something1" style="color:red">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
    </p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.



    </div>
    <h3><a href="#" id="tab4">tab 4</a></h3>
    <div>Text Here
    </div>
</div>

JavaScript

$(function(){
        $('#multiAccordion').multiAccordion({
            active: [1, 2],
            click: function(event, ui) {
                //console.log('clicked')
            },
            init: function(event, ui) {
                //console.log('whoooooha')
            },
            tabShown: function(event, ui) {
                //console.log('shown')
            },
            tabHidden: function(event, ui) {
                //console.log('hidden')
            }

        });

        $('#multiAccordion').multiAccordion("option", "active", [y]);
    });

    function getQueryVariable(variable)
{
   var query = window.location.search.substring(1);
   var vars = query.split("&");

   for (var i=0;i<vars.length;i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){return pair[1];}
   }
   return(false);


}
var x = getQueryVariable("page");

switch (x){
        case(x = "tab1"):
        y = 0;
        break;  
        case(x = "tab2"):
        y = 1;
        break;          
        case(x = "tab3"):
        y = 2;
        break;          
        case(x = "tab4"):
        y = 3;
        break;
        case(x = false):
        y = "";
        break;
        default:
        y ="";
        break;
        }

有什么建议么？

PS 这是网络上其他地方对我的问题的最接近的描述，但没有答案..另一个线程

4

2 回答 2

2

无需在页面中包含选项卡，只需针对哈希中的 ID。因此，您的链接将如下所示：

<a href="#something">SOMETHING</a><br />
<a href="#something1">SOMETHING1</a>

然后您可以包含此代码以从哈希中查找 ID，找到正确的选项卡并打开它。这是完整的代码和演示：

$(function() {

    var updateAccordion = function(hash) {
        hash = hash || window.location.hash;
        var content, tab;
        // look for a hash
        if (hash && $(hash).length) {
            // find accordion content
            content = $(hash).closest('.ui-accordion-content');
            if (content.length) {
                // find "tab#" from <a> inside of accordion header (h3)
                tab = parseInt(content.prev('h3').find('a').attr('id').replace('tab',''), 10) - 1;
                $('#multiAccordion').multiAccordion("option", "active", [tab]);
            }
        }
    };

    // intercept all clicked links and look for a hash
    $('a').click(function(){
        if (this.hash) {
            updateAccordion(this.hash);
        }
    });

    $('#multiAccordion').multiAccordion({
        active: [1],
        click: function(event, ui) {
            //console.log('clicked')
        },
        init: function(event, ui) {
            //console.log('whoooooha')
        },
        tabShown: function(event, ui) {
            //console.log('shown')
        },
        tabHidden: function(event, ui) {
            //console.log('hidden')
        }
    });

    // open up accordion to correct tab after initialization
    updateAccordion();
});​
于 2012-08-27T22:21:11.620 回答
0

尝试使用document.location.hash直接访问哈希参数。在您的示例中：

index.html?page=tab2#something

document.location.search将会?page=tab2

document.location.hash将会#something

您正在尝试解析错误的值，所以我猜 JQuery 插件在尝试打开不存在的选项卡时会滚动到页面底部。

于 2012-08-27T21:35:24.360 回答