Question

有没有办法让href=".edit"成为一个班级？

因为我现在有这个：

<a href="#edit" >Edit</a>

<div id="edit" ></div>
<div id="edit" ></div>
<div id="edit" ></div>
<div id="edit" ></div>

但我有很多<div id="edit" ></div>，因为它从数据库中回应了php。它只链接到第一个。我怎么能改变这个？

Answer 1

具有相同id的多个元素是无效的HTML。

链接到页面中特定id位置的原因是因为预期它是唯一的，多个元素可以具有相同的class，因此哪一个链接到willn'是可以确定的，因此你不能这样做。

Answer 2

这是无效的HTML。

文档上应该只有唯一的id - 您不能拥有多个具有相同id值的元素。

来自spec：

此属性为元素指定名称。该名称在文档中必须是唯一的。

如果您希望特定div元素具有相同的样式，则为它们提供相同的类，例如class="whatever"。

Answer 3

如前所述，这是无效的HTML，不会以这种方式工作。

可能的解决方案

在每个div中使用不同的ID，并为每个目标使用链接

或

使用类而不是ID并通过脚本导航（例如使用jQuery的next()选择器

jQuery示例

http://jsfiddle.net/4h6Ly/

请注意，出于可用性原因，我不建议使用此方法！ - 当然，不需要突出显示，您需要在此处提供编辑功能。

<强> HTML

<button id="edit_button">Edit</button> <div class="edit" >1</div> <div class="edit" >2</div> <div class="edit" >3</div> <div class="edit" >4</div>

CSS

.active_edit { background-color: yellow; }

JS

$('#edit_button').click(function() { var active = $('.active_edit'); if (active.length == 0) $('.edit').first().addClass('active_edit'); else { $('.active_edit').removeClass('active_edit').next('.edit').addClass('active_edit'); } });

Answer 4

如果你有访问PHP输出，给ids一个唯一的后缀，后缀的可能来源是数据库中的唯一索引，可能是主索引字段，所以你有这样的东西。

<a href="#edit-123" >Edit</a>

<div id="edit-341" ></div>
<div id="edit-356" ></div>
<div id="edit-12342" ></div>
<div id="edit-124" ></div>

注意：根据指数

，可能会有所不同

Answer 5

我知道这可能有点过时的答案;但是，我一般都是CSS的新手，并且在大约15年内没有做任何HTML - 我意识到很多事情已经改变了，因为我现在是第3天。因此，如果我的编码很草率或不合适，我会道歉。

无论如何，我想我有一个解决这个问题的方法，因为我正试图自己设计一个网站。这段代码是我在http://leslievarghese.com/click-events-using-pure-css/找到的教程的分支。

因此，通过某种操作 DOM树，我在多个祖先中放置了几类div。然后在目标上我显示它们。我希望这种技术对任何可能遇到此页面的人都有帮助。

<style>
.box{  
    border: 2px solid #ccc;
    padding:20px;
    margin:20px 0 0;
    max-height:150px;
    max-width:300px;  
    display:none;  
}

#parent:target .box1, #parent2:target .box2, #parent3:target .box{
    display:block;
}  

</style>
<body>  

<a href="#parent">Show Box 1</a>  
<a href="#parent2">Show Box 2</a>  
<a href="#parent3">Show All</a>  
<a href="#hidebox">Hide All</a>  

<div id="parent3">  
<div id="parent2">  
<div id="parent">  

<div class='box box1'> Contents of Box 1 </div>  
<div class="box box2"> Contents of Box 2 </div>  
<div class="box box1"> Contents of Box 1 </div>  
<div class="box box2"> Contents of Box 2 </div>  

</div>  
</div>  
</div>

希望这有帮助。

按类名而不是id链接到文档？

5 个答案:

jQuery示例