我已经将一个不错的第二方 Accordion (引用 URL:http://www.switchroyale.com/vallenato/)集成到我的网站中，默认情况下无法将 h1 ID 显示为 anchor url。
Accordion 的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>
有没有办法绑定(bind)h1 ID(这里"tab1"和"tab2"是h1 ID 在上面的 html 代码中)加上 js 代码的点击功能，使得 Accordion 的标题 id 作为 anchor url 附加在网络浏览器的地址栏中单击标题以打开关联的选项卡，如下例所示？
http://www.somesite.com/somepage.html#tab1
http://www.somesite.com/somepage.html#tab2
谢谢，
最佳答案
处理点击事件的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 是这样的，你可以将标题作为链接(我的想法):
<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。
关于javascript - 如何在浏览器的地址栏中附加 Accordion 的标题 ID 作为 anchor URL？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20968222/