| FAQ |
| Kalender |
|
|
2009-09-09, 01:17
|
#1 | ||
|
|||
|
Medlem
|
Det du vill göra är att kolla när en radiobutton blir klickad.
När den blir det så vill du veta vilken grupp div du är i (grp1, grp2 osv) du vill också veta vilken radiobutton man klickat på för att kunna visa rätt div. Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[type="radio"]').click(function(){
var clicked = $(this).val();
var parentDiv = $(this).parent().attr('id');
$('#'+parentDiv+ ' div').css({'display':'none'}).each(function(){
var currDiv = $(this);
if(currDiv.attr('class') === clicked){
currDiv.css({'display':'block'});
}
});
});
});
</script>
<style type="text/css">
.css{
background:yellow;
}
.text{
background:blue;
}
.tema{
background:red;
}
</style>
</head>
<body>
<div id="grp1">
<input type="radio" name="group1" value="css" /> CSS <br />
<input type="radio" name="group1" value="text" /> TEXT <br />
<input type="radio" name="group1" value="tema" /> TEMA <br />
<input type="radio" name="group1" value="inget" /> INGET <br />
<div class="css">
<h1>CSS</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae lacinia velit. Maecenas rhoncus, justo rutrum posuere egestas, nibh erat facilisis quam, ut imperdiet mauris urna quis urna. Cras sem magna, dignissim nec tincidunt ac, tincidunt ac velit. Praesent interdum, nisl vitae dignissim consequat, magna tortor ullamcorper tortor, ac feugiat massa dolor eu quam. Nam sodales suscipit porta. Ut luctus, risus nec accumsan consectetur, urna lacus sollicitudin lectus, in tempus leo ligula at elit. Nulla id aliquam dolor. Etiam a ligula sem. Morbi in velit erat. Nullam condimentum dignissim mi pulvinar cursus. Nulla facilisi. </div>
<div class="text">
<h1>TEXT</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae lacinia velit. Maecenas rhoncus, justo rutrum posuere egestas, nibh erat facilisis quam, ut imperdiet mauris urna quis urna. Cras sem magna, dignissim nec tincidunt ac, tincidunt ac velit. Praesent interdum, nisl vitae dignissim consequat, magna tortor ullamcorper tortor, ac feugiat massa dolor eu quam. Nam sodales suscipit porta. Ut luctus, risus nec accumsan consectetur, urna lacus sollicitudin lectus, in tempus leo ligula at elit. Nulla id aliquam dolor. Etiam a ligula sem. Morbi in velit erat. Nullam condimentum dignissim mi pulvinar cursus. Nulla facilisi. </div>
<div class="tema">
<h1>TEMA</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae lacinia velit. Maecenas rhoncus, justo rutrum posuere egestas, nibh erat facilisis quam, ut imperdiet mauris urna quis urna. Cras sem magna, dignissim nec tincidunt ac, tincidunt ac velit. Praesent interdum, nisl vitae dignissim consequat, magna tortor ullamcorper tortor, ac feugiat massa dolor eu quam. Nam sodales suscipit porta. Ut luctus, risus nec accumsan consectetur, urna lacus sollicitudin lectus, in tempus leo ligula at elit. Nulla id aliquam dolor. Etiam a ligula sem. Morbi in velit erat. Nullam condimentum dignissim mi pulvinar cursus. Nulla facilisi. </div>
</div>
</body>
</html>
Du behöver inte göra något speciellt för att skapa flera grupper (i detta upplägget) allt du behöver göra är att kopiera grp1 diven och byta id till grp2 samt byta name på radiobuttons till group2. Du kan kika på en screencast jag mumlade ihop här http://screenr.com/Be8 Lycka till. |
||
|
 Svara med citat
|
| Svara |
«
Föregående ämne
|
Nästa ämne
»
| Ämnesverktyg | |
| Visningsalternativ | |
Hybrid-visning
|
|
Alla tider är GMT +2. Klockan är nu 07:32.