使用div id进行Javascript切换

Question

大家好，我有jquery切换脚本的问题..

<a class="clickMe">Text 1</a>
</br>
 <div class="sri"> - This text will be toggled</div>

<a class="clickMe">Text 2</a>
</br>
<div class="sri"> - This text will be toggled 2</div>


$('a.clickMe').click(function () {
// find first of following DIV siblings
// with class "textBox" and toggle it

$(this).nextAll('div.sri:first').show();
$('div.sri:visible').not($(this).nextAll('div.sri:first')).toggle();
});

上面的脚本工作正常请检查演示

但现在我需要使用<div id代替<div class而不改变脚本的功能...我尝试了很多方法，但仍然有一些问题...我可能不必使用<a class="clickMe">有没有办法解决这个问题？

Answer 1

确保不要重复分配给元素的ID。

以下是XHTML 1.0的一些规范：

在XML中，片段标识符的类型为ID，每个元素只能有一个ID类型的属性。 因此，在XHTML 1.0中，id属性被定义为ID类型。 为了确保XHTML 1.0文档是结构良好的XML文档，在上面列出的元素上定义片段标识符时，XHTML 1.0文档必须使用id属性。 有关在将XHTML文档作为媒体类型text / html提供时确保此类锚点向后兼容的信息，请参阅HTML兼容性指南。

Answer 2

使用唯一ID：

<a class="clickMe" toggle="first">Text 1</a>
</br>
 <div id="first" class="text"> - This text will be toggled</div>

<a class="clickMe" toggle="second">Text 2</a>
</br>
<div id="second" class="text"> - This text will be toggled 2</div>


$('a.clickMe').click(function () {
   id = $(this).attr('toggle');
   $('.text').not('#' + id).hide();
   $('#' + id).show();
});

查看我的演示或我编辑的演示或第三个演示 。