CODEWITHSUNDEEP
html
Norm
Norm

Reputation: 155

Linking to a document by class name instead of id?

Is there a possible way to do href=".edit" to make it be a class?

Because right now I have this: 

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

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

But I have lots of <div id="edit" ></div> because it php echoes from a database. It only links to the first one. How can I change this?

Upvotes: 1

Views: 5578

Answers (5)

David Ryan
David Ryan

Reputation: 11

I know this may be a bit outdated for an answer; however, I am new to CSS in general and have not done any html in about 15 years -- I realized a lot has changed as I am now on day 3. Therefor I apologize if my coding is sloppy or improper.

Regardless, I think I have a solution to this question as I am trying to design a site myself. This code is branched off a tutorial I found at http://leslievarghese.com/click-events-using-pure-css/.

So, by somewhat manipulating the DOM tree, I placed several classes of divs inside multiple ancestors. Then on target I display them. I hope this technique could be helpful to anyone who may come across this page.

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

Hopefully this helps.

Upvotes: 1

yunzen
yunzen

Reputation: 33439

If you have acces to the PHP output, give the ids a unique suffix, possible source of the suffix is the a unique index in the database, presumably the primary index field, so you have something like this.

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

Note: suffices may vary according to the indices

Upvotes: 1

Smamatti
Smamatti

Reputation: 3931

As already stated this is invalid HTML and will not work this way.

Possible solutions

  • Use different IDs in every div and use a link for each target

or

  • Use a class instead of IDs and navigate via script (for example use jQuery's next() selector

jQuery Sample

http://jsfiddle.net/4h6Ly/

Note that I do not recommend this method for usability reasons! - Of course instead of highlighting you would need to provide the edit function here.

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');
    }
});

Upvotes: 1

Andrew Marshall
Andrew Marshall

Reputation: 96944

Having multiple elements with the same id is invalid HTML.

The reason linking to a specific id's location in the page works is because it is expected to be unique, multiple elements can have the same class, so which one to link to wouldn't be determinable, and thus you cannot do so.

Upvotes: 2

Oded
Oded

Reputation: 499042

This is invalid HTML.

There should only ever be unique ids on a document - you can't have multiple elements with the same id value.

From the spec:

This attribute assigns a name to an element. This name must be unique in a document.

If you want the specific div elements to have the same styling give them all the same class, for example class="whatever".

Upvotes: 1

Related Questions