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

Citera flera Citera

2012-06-20 22:06

På SoundCloud | Fästmöns galleri

azoapes

Medlem

Plats: Göteborg
Registrerad: Jun 2004

●

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

Senast redigerat 2012-06-21 18:36

Visa signatur

Citera flera Citera

2012-06-20 22:48

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

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

Senast redigerat 2012-06-20 23:13

Visa signatur

Citera flera Citera

2012-06-20 23:01

Alling

99:e percentilen ★

Testpilot

Plats: Göteborg
Registrerad: Aug 2011

●

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

Citera flera Citera

2012-06-20 23:09

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

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

2012-06-20 23:56

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

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

Senast redigerat 2012-06-21 00:11

Visa signatur

Citera flera Citera

2012-06-21 01:48

atriix

Medlem

Plats: *
Registrerad: Nov 2011

●

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

Visa signatur

Citera flera Citera

2012-06-21 03:49

Yxskaftet

Medlem

Registrerad: Okt 2002

●

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

Citera flera Citera

2012-06-21 10:02

ePoint

Medlem

Plats: Norrköping
Registrerad: Nov 2004

●

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

Citera flera Citera

2012-06-21 12:01

phroggyy

Medlem

Plats: Solna, Stockholm
Registrerad: Dec 2010

●

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?

Senast redigerat 2012-06-21 13:55

Visa signatur

Citera flera Citera

2012-06-21 18:38

azoapes

Medlem

Plats: Göteborg
Registrerad: Jun 2004

●

Skrivet av ePoint:

Ändra till följande så fungerar det.

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

På SoundCloud | Fästmöns galleri

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.

Visa signatur

Citera flera Citera

2012-06-22 07:21