url jquery手风琴中没有主题标签

时间:2015-05-27 01:31:52

标签: javascript jquery html

下面是一个完美的手风琴代码。我不想使用hashtag,因为它打破了我们当前的网站。有没有办法使用手风琴的无标签网址? 我尝试使用"?"但是,当使用网址访问手风琴时它没有用?这有可能吗?

所以我的想法是能够在我有这样的网址时打开手风琴:

来自:test.html#Link1 To:test.html?Link1,它不一定是问号,我只是试着看,它可能是除了标签之外的任何东西。感谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta name="description" content="" />
        <meta name="keywords" content="" />

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

  var $accordion = $("#accordion").accordion({active: false, collapsible: true}),
      hashId = 0;

    if (window.location.hash) {
      $accordion.children('h3').each(function(i){
        var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
        this.id = txt;
        if (txt === window.location.hash.slice(1)) {
          hashId = i;
        }
      });

      $accordion.accordion({
        active: hashId,
        animate: true,
        heightStyle: 'content',
        collapsible: true,
        create: function( event, ui ) {
          $accordion.children('h3').each(function(i){
            $(this).before('<a class="accordion-link link" data-index="' + i + '" href="?' + this.id + '"></a>');
          });
          $accordion.find('.accordion-link').click(function(){
            $accordion.accordion( "option", "active", $(this).data('index') );
          });
        }
    });
    }
  });
        </script>
    </head>

    <body>

        <div id="accordion">
<h3><a href="?link1">Link1</a></h3>
<div>content</div>

<h3><a href="?link2">Link2</a></h3>
<div>content</div>
</div>      
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

您可以使用格式为test.html?section=Link1的网址。您只需要停止使用哈希,并提取queryString参数as explained here。结果代码如下:

<script type="text/javascript">
  function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
  }

  $(function() {

    var $accordion = $("#accordion").accordion({active: false, collapsible: true}),
      hashId = 0,
      section = getParameterByName('section');

    if (section) {
      $accordion.children('h3').each(function(i){
        var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
        this.id = txt;
        if (txt === section) {
          hashId = i;
        }
      });

      $accordion.accordion({
        active: hashId,
        animate: true,
        heightStyle: 'content',
        collapsible: true,
        create: function( event, ui ) {
          $accordion.children('h3').each(function(i){
            $(this).before('<a class="accordion-link link" data-index="' + i + '" href="?' + this.id + '"></a>');
          });
          $accordion.find('.accordion-link').click(function(){
            $accordion.accordion( "option", "active", $(this).data('index') );
          });
        }
    });
    }
  });
        </script>