Byta ut divs med javascript (använder tabs), hur görs det enklast?

Permalänk
Medlem

Byta ut divs med javascript (använder tabs), hur görs det enklast?

Ja, som titeln säger undrar jag helt enkelt hur man lättast byter ut en div som visas mot en annan div med javascript, då jag behöver det här när jag använder olika tabs som man kan bläddra genom. Jag bifogar nedan några min HTML kod, samt det jag redan provat men som inte blir som jag vill.

<!doctype html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="courses_style.css" type="text/css" media ="screen"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="tabcontent.js"></script> <title>Untitled Document</title> <script> function showhide(id){ if (document.getElementById){ obj = document.getElementById(id); if (obj.style.display == "none"){ obj.style.display = ""; } else { obj.style.display = "none"; } } } </script> </head> <body id="tabexp_body"> <div id="tabmenu"> <ul> <li><a href="#" title="tab1" class="active" onclick="showhide('tab1info'); return(false);" id="alt1">tab1</a></li> <li><a href="#" title="tab2" onclick="showhide('tab2info'); return(false);" id="alt2">tab2</a></li> </ul> </div> <div id="main"> <h3 id="subtitle">Main content header</h3> <p id="info">Main content</p> </div> <div style="display:none;" id="tab1info"> På den här sidan ska man se den första tabben. </div> <div style="display: none;" id="tab2info"> På den här sidan ska man se den andra tabben. </div> </body> </html>

Problemet med denna kod var att diven visades, men ersatte inte den div som redan fanns, utan placerades under det område den skulle in i... Jag fortsatte alltså att prova runt lite, och googla en himla massa...

jag hittade då denna kod:

<script type="text/javascript"> var allDivs = document.getElementsByTagName('div'); var divWithId = document.getElementById(id); $(document).ready(function() { $("#alt1").click(function() { $("h3").html("Main content header") $("#main").html(); }); }); </script>

(jag har inte orkat lägga till för tab2 än då det kändes onödigt om det inte skulle fungera)

Jag tror att den andra enkelt går att ändra på för att få funktionen att hämta id från den länk man trycker på, men det känns som om hjärnan stannat helt, så då undrar jag om ni på SweClockers kan ge mig någon hjälp kanske?

Tack på förhand!

EDIT: har nu börjat experimentera med någon sån här kod

function showinfo(id) { $(document).ready(function() { $(document.getElementById(id)); $("#info").html(id); }) }

Dock är den troligtvis fel på mer än ett sätt, börjar bli lite trött nu

Visa signatur

Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye

Permalänk
Medlem

Det här tycker jag är ett enkelt sätt att göra det på. Använder denna jQuery-metod: http://api.jquery.com/index/ som returnerar vilken position ett element har. Jag använder också metoden .eq() som returnerar elementet på angivet index: http://api.jquery.com/eq/

Logiken här är ju att om man klickar på den första länken, ska den första diven synas etc. så jag tycker detta är en logisk lösning.

<div id="tab-menu"> <ul> <li><a>tab1</a></li> <li><a>tab2</a></li> </ul> </div> ... <div id="tabs"> <div class="tab"> <p>Tab 1</p> </div> <div class="tab"> <p>Tab 2</p> </div> </div>

$(function(){ // samma som $(document).ready(... var tabLinks = $('#tab-menu a'); var tabs = $('#tabs .tab'); tabLinks.click(function(){ // när man klickar på en länk tabLinks.removeClass('active'); // ta bort klassen active från alla länkar var i = $(this) .addClass('active') // lägg till klassen active på denna länk .parent().index(); // om man klickar på länk #1 så blir i = 0 eftersom länkens li har index 0 tabs.hide() // dölj alla tabbar .eq(i).show(); // visa tabb nummer i }); tabLinks.eq(0).click(); // aktivera klickeventen på länk #1 för att sätta den till aktiv });

Permalänk
Medlem
Skrivet av azoapes:

Det här tycker jag är ett enkelt sätt att göra det på. Använder denna jQuery-metod: http://api.jquery.com/index/ som returnerar vilken position ett element har. Jag använder också metoden .eq() som returnerar elementet på angivet index: http://api.jquery.com/eq/

Logiken här är ju att om man klickar på den första länken, ska den första diven synas etc. så jag tycker detta är en logisk lösning.

<div id="tab-menu"> <ul> <li><a>tab1</a></li> <li><a>tab2</a></li> </ul> </div> ... <div id="tabs"> <div class="tab"> <p>Tab 1</p> </div> <div class="tab"> <p>Tab 2</p> </div> </div>

$(function(){ // samma som $(document).ready(... var tabLinks = $('#tab-menu a'); var tabs = $('#tabs .tab'); tabLinks.click(function(){ // när man klickar på en länk tabLinks.removeClass('active'); // ta bort klassen active från alla länkar var i = $(this) .addClass('active') // lägg till klassen active på denna länk .index(); // om man klickar på länk #1 så blir i = 0 tabs.hide() // dölj alla tabbar .eq(i).show(); // visa tabb nummer i }); tabLinks.eq(0).click(); // aktivera klickeventen på länk #1 för att sätta den till aktiv });

Tackar så väldigt mycket för vacker kod, dock så får jag det inte att funka, vilket troligtvis är för att jag glömt något väldigt dumt, men det skulle vara snällt om du ändå kunde kolla igenom koden

body

<body id="tabexp_body"> <div id="tabmenu"> <ul> <li><a href="#" title="tab1" class="active" id="alt1">tab1</a></li> <li><a href="#" title="tab2" id="alt2">tab2</a></li> </ul> </div> <div id="tabs"> <div class="tab"> <p>På den här sidan ska man se den första tabben.</p> </div> <div class="tab"> <p>På den här sidan ska man se den andra tabben.</p> </div> </div> </body> </html>

JQuery (i head)

<script type="text/javascript"> $(function(){ var tabLinks = $('#tabmenu ul li a'); var tabs = $('#tabs .tab'); tabLinks.click(function(){ // onclick tabLinks.removeClass('active'); // removes the class 'active' var i = $(this) .addClass('active') // adds class 'active' to the link .index(); // clicking on first link -> i = 0 tabs.hide() // hide all tabs .eq(i).show(); // display tab number i }); tabLinks.eq(0).click(); // activate click events for link #1 to make it into 'active' }); </script>

Tackar så mycket för den hjälp jag fått hittills

EDIT: man ser innehållet i den första diven, men inte innehållet i den andra

Visa signatur

Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye

Permalänk
99:e percentilen

Kan tyvärr inte jQuery, men jag kan ge dig ett HTML-tips: Välj ANSI as UTF-8 eller (som det heter i Notepad++) UTF-8 without BOM. Lägg även till följande kodrad i head-elementet om du inte redan gjort det:

<meta charset="UTF-8" />

Då behöver du inte slösa tid på att skriva om å, ä och ö som HTML-entiteter. Det är dessutom praxis att använda UTF-8 som teckenkodning.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem
Skrivet av Zuggmate:

Kan tyvärr inte jQuery, men jag kan ge dig ett HTML-tips: Välj ANSI as UTF-8 eller (som det heter i Notepad++) UTF-8 without BOM. Lägg även till följande kodrad i head-elementet om du inte redan gjort det:

<meta charset="UTF-8" />

Då behöver du inte slösa tid på att skriva om å, ä och ö som HTML-entiteter. Det är dessutom praxis att använda UTF-8 som teckenkodning.

Jo, jag vet, jag brukar köra på UTF-8, men skriver om dem mest för att lättare kunna tolka annan kod, använder det för att senare kunna läsa det, så att säga

Visa signatur

Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye

Permalänk
Medlem

Fick en ny tanke nu: Skulle man kanske kunna använda slideup så att allt innehåll först försvinner, och sedan låta den identifiera rätt tab med hjälp av dess id eller kanske en länks titel?

EDIT: Efter många om och men kom jag fram till detta som funkar, dock så 'hoppar' diven upp en kort stund när man byter tab :S

<body id="tabexp_body"> <div id="tabmenu"> <ul> <li><a href="#" class="active tab" title="tab-1">tab1</a></li> <li><a href="#" title="tab-2" class="tab">tab2</a></li> </ul> </div> <div id="tabs"> <div class="divtab" id="tab-1"> <h2>TAB 1</h2> <p>På den här sidan ser man den första tabben.</p> </div> <div class="divtab" id="tab-2" style="display:none;"> <h2>TAB 2</h2> <p>På den här sidan ser man den andra tabben.</p> </div> </div> </body> </html>

samt detta script i head

$(function (){ $("a.tab").click(function() //onclick { $(".active").removeClass('active'); // removes the class 'active' $(this).addClass('active'); // adds class 'active' to the link $(".divtab").slideUp(); //slides upp content of both tabs var tab_show = $(this).attr("title"); $("#"+tab_show).slideDown(); // slide down the content stored in tab_show }); });

Visa signatur

Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye

Permalänk
Medlem

http://jqueryui.com/demos/tabs/ kanske kan vara till hjälp

Visa signatur

FreeNAS 3U | 8GB | 2x2x3TB ProxMox i7-8700K | 32GB Desktop Dell 22" | Benq 22" | i5-smth | 16GB | Intel 520 120GB | 500GB | Arch

Permalänk

Gjorde en onödigt krånglig tabnavigering för längesedan som gör det jag tror du vill: http://jsfiddle.net/Z5ELp/2/

Permalänk
Medlem
Skrivet av phroggyy:

var i = $(this)
.addClass('active') // adds class 'active' to the link
.index(); // clicking on first link -> i = 0

Ändra till följande så fungerar det.

var i = tabLinks.index(this); // clicking on first link -> i = 0 $(this).addClass('active') ;

Visa signatur

"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." - Brian W. Kernighan

Permalänk
Medlem
Skrivet av ePoint:

Ändra till följande så fungerar det.

var i = tabLinks.index(this); // clicking on first link -> i = 0 $(this).addClass('active') ;

det fungerar fortfarande inte för mig med den koden :/

EDIT: När jag lägger den kod jag har i en extern .js fil och länkar till den i min main-sida så fungerar det inte. Det funkar om jag använder mitt tab_experiment.html, men inte i mitt dokument courses.html (vilket är där skriptet ska användas). Är det någon som vet varför det blir så här? Skulle någon css eller div eller annat förstöra så att det inte funkar?

Visa signatur

Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye

Permalänk
Medlem
Skrivet av ePoint:

Ändra till följande så fungerar det.

var i = tabLinks.index(this); // clicking on first link -> i = 0 $(this).addClass('active') ;

Tack för det, jag torrkodade utan att testa och missade detta. .index() på länken returnerar naturligtvis alltid 0. Har redigerat mitt inlägg nu, till .parent().index() istället.

Permalänk
Medlem

Du har väl med <script src="länk till en fil med jQuery"></script>?

Skickades från m.sweclockers.com

Permalänk
Medlem
Skrivet av Snacker:

Du har väl med <script src="länk till en fil med jQuery"></script>?

Skickades från m.sweclockers.com

Ja, självklart

Visa signatur

Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye