打开多开手风琴选项卡，然后滚动到部分中的散列位置（即滚动评估查询字符串前散列锚？）

如何创建，将扩大一个特定的手风琴节然后滚动到一个特定的DIV链接在那部分？打开多开手风琴选项卡，然后滚动到部分中的散列位置（即滚动评估查询字符串前散列锚？）

我使用了最新的jQuery UI库以及jquery.multi-手风琴1.5.3.js，并为IE8或开发后

我已经能够成功地实现这两个multiAccordion和通过解析查询字符串，我可以操纵要展开的部分，然后滚动到第一个哈希锚点。

奇怪的是，这似乎只适用于第一个链接，任何其他链接滚动通过相应的散列锚点，总体而言，它行为不正常。

我碰到几个线程来提其IE识别查询字符串哈希锚的问题是这样index.php?page=page1#section3，即... Why does Internet Explorer not support bookmarks with both a querystring and a hash/anchor? Firefox works properly，但我还没有碰到过一个解决方案...

有没有人有一个解决方案为了这？任何替代品？

这里是我的代码（如果它更清晰的你 - 用同一代码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; 
     }

任何建议？

P.S.这里是我在网络上其他地方的问题的最接近的描述，但没有答案。.Another thread

来源

2012-08-27 Reno Dimitrova

尝试使用document.location.hash直接访问散列参数。在您的例子：

index.html?page=tab2#something

document.location.search将?page=tab2

document.location.hash将#something

您正试图解析错误的值，所以我想jQuery插件滚动到页面底部当它试图打开一个不存在的标签时。

来源

2012-08-27 21:35:24

你是对的，但是，如果我找回'document.location.has'h和之后的事情变得很明显设定警报正确的浏览器滚动到它，只有经过它已经滚动到它执行开关的散列.... –

而不是将标签包含在页面中，只需定位散列中的标识。因此，您的链接将如下所示：

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

然后，您可以包含此代码以从哈希中查找ID，找到正确的选项卡并将其打开。下面是完整的代码& demo：

$(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-27 22:21:11 Mottie

你的代码提供了一个很好的选择来控制使用散列打开哪个选项卡，但我的问题仍然存在 - 浏览器不滚动到该散列标记的y偏移量，它只是打开正确的选项卡。我的问题似乎是一个IE错误（IE不能从正确的顺序解析字符串中的值，更新我的问题）....所以我开始考虑在切换后设置暂停评估，然后滚动到散列.... –

打开多开手风琴选项卡，然后滚动到部分中的散列位置（即滚动评估查询字符串前散列锚？）

回答

相关问题