1

特定のアコーディオン セクションを展開し、そのセクション内の特定の DIV にスクロールするリンクを作成するにはどうすればよいですか?

最新の jQuery UI ライブラリと jquery.multi-accordion-1.5.3.js を使用し、IE8 以降向けに開発しています

multiAccordion の両方を正常に実装でき、クエリ文字列を解析することで、展開するセクションを操作し、最初のハッシュ アンカーまでスクロールできます。

奇妙なことに、これは最初のリンクでのみ機能するようで、他のリンクでは対応するハッシュ アンカー を超えてスクロールし、全体的に不規則に動作します。

このようなクエリ文字列でハッシュ アンカーを認識する際に問題がある IE について言及しているスレッドをいくつか見つけましindex.php?page=page1#section3た。Firefox は正常に動作しますが、解決策が 1 つも見つかりません...

誰かがこれに対する解決策を持っていますか? 代替案はありますか？

これが私のコードです（または、あなたにとってより読みやすい場合-同じコードのフィドル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 に答える