www.webdeveloper.com
Results 1 to 3 of 3

Thread: Javascript Bookmarkable tabs

  1. #1
    Join Date
    Apr 2009
    Location
    Thessaloniki, Greece
    Posts
    24

    Javascript Bookmarkable tabs

    Greetings,
    Here's the issue: I have a table with some values, the first cell of each line being a link to show/{id} where I have added a tab menu with three "links", one for details, one for edit and one for delete.

    Code:
    <ul class="tabmenu" id="tabmenu">
    	<li><a href="#show" onclick="makeactive(1)" id="show">Information</a></li>
    	<li><a href="#edit" onclick="makeactive(2)" id="edit">Edit</a></li>
    	<li><a href="#delete" onclick="makeactive(3)" id="delete">Delete</a></li>
    </ul>
    
    <div id="tab1" class="tab_content_active">
    	<!-- my content here -->
    </div>
    <div id="tab2" class="tab_content">
    	<!-- my content here -->
    </div>
    <div id="tab3" class="tab_content">
    	<!-- my content here -->
    </div>
    my function is as follows:
    Code:
    function makeactive(tab) {
    	$(document.getElementById("show")).removeClass();
    	$(document.getElementById("edit")).removeClass();
    	$(document.getElementById("delete")).removeClass();
    	if(tab == 1){
    		$(document.getElementById("show")).addClass("active");
    	}
    	else if(tab == 2){
    		$(document.getElementById("edit")).addClass("active");
    	}
    	else if(tab == 3){
    		$(document.getElementById("delete")).addClass("active");
    	}
    	
    	$(document.getElementById("tab1")).removeClass();
    	$(document.getElementById("tab1")).addClass("tab_content");
    	$(document.getElementById("tab2")).removeClass();
    	$(document.getElementById("tab2")).addClass("tab_content");
    	$(document.getElementById("tab3")).removeClass();
    	$(document.getElementById("tab3")).addClass("tab_content");
    	
    	$(document.getElementById("tab"+tab)).removeClass();
    	$(document.getElementById("tab"+tab)).addClass("tab_content_active");
    }
    The tabs so far work ok, but I decided to add an edit button to the original table so that the user won't have to first see the information of the element, then click the "Edit" tab and then finally edit it. The button is supposed to open the show.php AND also immediately activate the "edit" tab.

    That's where my problem is.
    If I link on the "edit" tab my url is like "show/1#edit" (where 1 is the id) but if I refresh the page, the url stays the same, but I see the contents of the "home" tab, meaning the whole thing is kinda broken.

    Any help would be mostly appreciated!

  2. #2
    Join Date
    May 2012
    Posts
    4
    I believe you'll need to check the hash value on page load and set the correct tab.

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Code:
    <ul class="tabmenu" id="tabmenu">
    	<li><a href="#show" onclick="makeactive(1)" id="show">Information</a></li>
    	<li><a href="#edit" onclick="makeactive(2)" id="edit">Edit</a></li>
    	<li><a href="#delete" onclick="makeactive(3)" id="delete">Delete</a></li>
    </ul>
    
    <div id="tab1" class="tab_content_active">
    	<!-- my content here -->
    </div>
    <div id="tab2" class="tab_content">
    	<!-- my content here -->
    </div>
    <div id="tab3" class="tab_content">
    	<!-- my content here -->
    </div>
    
    <script>
    function makeactive(tab) {
       document.body.className=  document.body.className.replace(/tab\d/,"") + "tab"+tab;
    }
    </script>
    
    <style>
    #tab1, #tab2, #tab3 { display:none;}
    .tab1 #tab1,
    .tab2 #tab2,
    .tab3 #tab3  { display: block; }
    :target { display: block; }
    </style>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles