Javascript 如何在浏览器中附加手风琴的标题id作为锚url'；谁的地址栏？_Javascript_Jquery_Html_Accordion_Jquery Ui Accordion

Javascript 如何在浏览器中附加手风琴的标题id作为锚url'；谁的地址栏？

javascript jquery html

Javascript 如何在浏览器中附加手风琴的标题id作为锚url'；谁的地址栏？,javascript,jquery,html,accordion,jquery-ui-accordion,Javascript,Jquery,Html,Accordion,Jquery Ui Accordion,我已经将一个不错的第二方手风琴（参考URL:）集成到我的网站中，默认情况下，该网站无法将h1id显示为锚URL 手风琴的js代码如下： /*! * Vallenato 1.0 * A Simple JQuery Accordion * * Designed by Switchroyale * * Use Vallenato for whatever you want, enjoy! */ jQuery(document).ready(function($) { //Ad

我已经将一个不错的第二方手风琴（参考URL:）集成到我的网站中，默认情况下，该网站无法将

h1id

显示为锚URL

手风琴的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;
});

<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>

html

代码示例如下：

/*!
 * 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;
});

<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>


这是怎么一回事？
这里有一些文字
下载
这里还有其他一些文字

是否有办法绑定

h1id

（此处

的“tab1”

和

的“tab2”

是上述

html

中的

h1id

）使用

js

code的点击功能，以便在点击标题时，手风琴的标题id作为锚url附加到web浏览器的地址栏中，以打开相关选项卡，如以下示例所示

谢谢，

处理单击事件的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');
        }
    });

如果希望url是这样的，可以将标题作为链接（我的想法）：


这里有一些文字
这里还有其他一些文字

我所做的是将链接的类名命名为“accordion头”。请看看这是否适合你。如果这样做行得通，那么如果出现任何不对齐，您可能需要处理css。

为什么需要这样做（www.somesite.com/somespage.html#tab1）？你能解释一下吗？您是否试图记住单击标题时单击了哪个选项卡或希望导航到另一个页面？如果您这样尝试，您将获得www.somesite.com/somespage.html#tab1@madi我想有一个唯一的url为每个tab@Manoj将

href

属性添加到heading标签会导致手风琴失去其功能。锚定url显示在浏览器的地址栏中，但在这种情况下关联的选项卡不会打开。如果需要绑定单击，则应绑定到链接而不是标题。将href属性以这种方式添加到标题标记会导致手风琴失去其功能。锚定url将显示在浏览器的地址栏中，但关联的选项卡不会打开。无论如何，谢谢。你需要改变插件，让链接成为点击的激活器。检查选择器是基于类还是基于元素标记。这将帮助你解决这个问题。如果您仍然不想使用链接，可以尝试将onchange事件绑定到隐藏的文本框，当单击标题时，文本框具有tap的值，onchange负责其他逻辑。如果您有任何其他与此相关的功能，您可以将唯一的url放在文本框中。您可以向我提供有关此问题的任何资源url吗？我所期望的是，浏览器应该在单击时将与每个选项卡或标题关联的id附加为锚定url。沉默池：你应该尝试读取插件中的代码，而不仅仅是希望得到答案。并非所有答案都有参考文献。