Question

我已将一个不错的第二方手风琴（参考网址：http://www.switchroyale.com/vallenato/）整合到我的网站中，默认情况下无法将h1 ID显示为锚网址。

手风琴的js代码如下：

/*!
 * Vallenato 1.0
 * A Simple JQuery Accordion
 *
 * Designed by Switchroyale
 * 
 * Use Vallenato for whatever you want, enjoy!
 */

jQuery(document).ready(function($)
{
    //Add Inactive Class To All Accordion Headers
    $('.accordion-header').toggleClass('inactive-header');

    //Set The Accordion Content Width
    var contentwidth = $('.accordion-header').width();
    $('.accordion-content').css({'width' : contentwidth });

    //Open The First Accordion Section When Page Loads
    $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
    $('.accordion-content').first().slideDown().toggleClass('open-content');

    // The Accordion Effect
    $('.accordion-header').click(function () {
        if($(this).is('.inactive-header')) {
            $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }

        else {
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }
    });

    return false;
});

以及html代码的示例如下：

<body>
<div id="accordion-container">
  <h1 class="accordion-header" id="tab1">What is it?</h1>           
     <div class="accordion-content">
        <p>Some texts goes here</p>
     </div>         
  <h1 class="accordion-header" id="tab2">Download</h1>          
      <div class="accordion-content">
         <p>Some other texts goes here</p>
    </div>
</div>
</body>

是否可以使用{{h1 ID "tab1" "tab2" h1 IDs html js {{1}} 1}}代码，以便只要点击标题以便打开相关标签，手风琴的标题ID就会在网页浏览器的地址栏中附加为锚定网址，如下例所示？

http://www.somesite.com/somepage.html#tab1

http://www.somesite.com/somepage.html#tab2

谢谢，

Answer 1

处理click事件的javascript代码如下。你必须相应地修改代码。但在此之前，请尝试执行下面建议的操作。

$('.accordion-header').click(function () {
        if($(this).is('.inactive-header')) {
            $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }

        else {
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }
    });

如果您希望网址如此，则将标题设为链接（我的想法）：

<div id="accordion-container">
  <a class="accordion-header" href="#tab1"><h1 id="tab1">What is it?</h1></a>           
     <div class="accordion-content">
        <p>Some texts goes here</p>
     </div>         
   <a class="accordion-header" href="#tab2"><h1 id="tab2">Download</h1></a>          
      <div class="accordion-content">
         <p>Some other texts goes here</p>
    </div>
</div>

我所做的是将链接的类名称设为“accordion-header”。请查看这是否适合您。如果这样可行，也许你必须在css上工作，如果发生任何错位。

如何在手风琴的地址栏中附加手风琴的标题ID作为锚点网址？

1 个答案: