Sida 1 av 1
hide show divar
Postat: 2008-09-20 08:28
av sanda
Tjenare på er!
Letar efter ett (tror det är JS) som kan visa och dölja divar.
Jag har att tex när man går in på sidan så är första länken/diven öppen medans dom andra stängda men när man klickar på en av de andra länkarna så ska den, i fråga, öppnas och den föregåede stängas.
I hans sidebar här finns ett sådant om ni inte hängde med
http://www.marcuswestberg.se
Re: hide show divar
Postat: 2008-09-20 13:00
av tumba25
Sätt style="display: none;" för dom divvar som inte ska visas vid start
Kod: Markera allt
<script type="text/javascript">
function sel_switch(ids)
{
div1 = document.getElementById("div1");
div1.style.display = "none";
div2 = document.getElementById("div2");
div2.style.display = "none";
div3 = document.getElementById("div3");
div3.style.display = "none";
div4 = document.getElementById("div4");
div4.style.display = "none";
switch(ids)
{
case "1":
div1.style.display = "block";
break;
case "2":
div2.style.display = "block";
break;
case "3":
div3.style.display = "block";
break;
case "4":
div4.style.display = "block";
break;
}
}
</script>
Precis före </head> och sen ett
I rutan man ska klicka i. X är id'n för divven som ska visas.
Du måste anpassa javaskript-snutten så den passar namnen på dina divvar.
Re: hide show divar
Postat: 2008-09-20 13:13
av Kail
Om du menar menyn kan du använda valfritt JS framework: jQuery, Moo Tools, script.aculo.us eller Prototype JS.
Re: hide show divar
Postat: 2008-09-20 15:25
av sanda
Nja det är divar som visar senate inlägg, kommentarer o.s.v. Kom över detta JS som funkar riktigt bra, dock, så skulle jag vilja att den "länk" som är aktiv vid tillfället ska på class="current" så det syns viliken av divarna som syns. skickar med koden som jag grävt fram
Kod: Markera allt
<div id="sidebar">
<div id="recenttopic">
<a class="current" href="javascript:switchid('newrecent');">Nyaste</a>
<a href="javascript:switchid('newcomments');">Kommentarer</a>
</div>
<div class="recentsidebar">
<div id='newrecent' style="display:block;">
<ol>
<?php
$lastposts = get_posts('numberposts=10');
foreach($lastposts as $post) :
setup_postdata($post);
?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ol>
</div>
<div id='newcomments' style="display:none;">
<p>Här visas kommentarer</p>
</div>
</div>
</div>
Och JS filen:
Kod: Markera allt
//here you place the ids of every element you want.
var ids=new Array('newrecent','newcomments');
function switchid(id){
hideallids();
showdiv(id);
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
Re: hide show divar
Postat: 2008-09-20 16:41
av sanda
Någon som har en idé?