Помогите с закладками на java script !

333_org_ua · December 2, 2010

Здравствуйте ! Помогите разобраться с вкладками ! Задача в том, что бы к кнопкам Document1, Document2, Document3, Document4, Document5 привязать выполнение какого либо действия, тоесть не просто вывод текстовой информации а например загрузка картинки или xml файла. Заранее благодарен вам за помощь !

Вот пример самой странички с вкладками http://zzz.ho.ua/

Вот html код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Dynamic tabs with jQuery - why and how to create them | JankoAtWarpSpeed Demos</title>
	<style type="text/css">
		body { font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif; font-size:13px; margin:0px auto;}
		#tabs { margin:0; padding:0; list-style:none; overflow:hidden; }
		#tabs li { float:left; display:block; padding:5px; background-color:#bbb; margin-right:5px;}
		#tabs li a { color:#fff; text-decoration:none; }
		#tabs li.current { background-color:#e1e1e1;}
		#tabs li.current a { color:#000; text-decoration:none; }
		#tabs li a.remove { color:#f00; margin-left:10px;}
		#content { background-color:#e1e1e1;}
		#content p { margin: 0; padding:20px 20px 100px 20px;}

		#main { width:900px; margin:0px auto; overflow:hidden;background-color:#F6F6F6; margin-top:20px;
			 -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px;}
		#wrapper, #doclist { float:left; margin:0 20px 0 0;}
		#doclist { width:150px; border-right:solid 1px #dcdcdc;}
		#doclist ul { margin:0; list-style:none;}
		#doclist li { margin:10px 0; padding:0;}
		#documents { margin:0; padding:0;}

		#wrapper { width:700px; margin-top:20px;}

		#header{ background-color:#F6F6F6; width:900px; margin:0px auto; margin-top:20px;
			 -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px; position:relative;}
		#header h2 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}

	</style>

	<script type="text/javascript" src="jquery-1.4.min.js" ></script>
	<script type="text/javascript">

		$(document).ready(function() {
			$("#documents a").click(function() { 
				addTab($(this));
			});


			$('#tabs a.tab').live('click', function() {
				// Get the tab name
				var contentname = $(this).attr("id") + "_content";

				// hide all other tabs
				$("#content p").hide();
				$("#tabs li").removeClass("current");

				// show current tab
				$("#" + contentname).show();
				$(this).parent().addClass("current");
			});

			$('#tabs a.remove').live('click', function() {
				// Get the tab name
				var tabid = $(this).parent().find(".tab").attr("id");

				// remove tab and related content
				var contentname = tabid + "_content";
				$("#" + contentname).remove();
				$(this).parent().remove();

				// if there is no current tab and if there are still tabs left, show the first one
				if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {

					// find the first tab	
					var firsttab = $("#tabs li:first-child");
					firsttab.addClass("current");

					// get its link name and show related content
					var firsttabid = $(firsttab).find("a.tab").attr("id");
					$("#" + firsttabid + "_content").show();
				}
			});
		});
		function addTab(link) {
			// If tab already exist in the list, return
			if ($("#" + $(link).attr("rel")).length != 0)
				return;

			// hide other tabs
			$("#tabs li").removeClass("current");
			$("#content p").hide();

			// add new tab and related content
			$("#tabs").append("<li class='current'><a class='tab' id='" +
				$(link).attr("rel") + "' href='#'>" + $(link).html() + 
				"</a><a href='#' class='remove'>x</a></li>");

			$("#content").append("<p id='" + $(link).attr("rel") + "_content'>" + 
				$(link).attr("title") + "</p>");

			// set the newly added tab as current
			$("#" + $(link).attr("rel") + "_content").show();
		}
	</script>
</head>
<body>

	<div id="header">
		<img src="logo.jpg" alt="JankoAtWarpSpeed demos" /><br />
		<h2><span lang="ru"><strong>ДЕМО урока (нажмите на ссылки ниже)</strong></span></h2>
		<img src="help.png" alt="Click on lnks to open 'documents' in tabs" style="position:absolute;left:-170px; top:200px;" />
	</div>
	<div id="main">
	<div id="doclist">
		<h2>Documents</h2>

		<ul id="documents">
			<li><a href="#"  rel="Document1" title="This is the content of Document1">Document1</a></li>
			<li><a href="#"  rel="Document2" title="This is the content of Document2">Document2</a></li>
			<li><a href="#"  rel="Document3" title="This is the content of Document3">Document3</a></li>
			<li><a href="#"  rel="Document4" title="This is the content of Document4">Document4</a></li>
			<li><a href="#"  rel="Document5" title="This is the content of Document5">Document5</a></li>

		</ul>
	</div>
	<div id="wrapper">
		<ul id="tabs">
			<!-- Tabs go here -->
		</ul>
		<div id="content">
			<!-- Tab content goes here -->
		</div>

	</div>
	</div>
</body>
</html>

Edited December 5, 2010 by 333_org_ua
код надо помещать в специальный тег

Veseloff · December 2, 2010

Страницу в студию! Мне, например, лень создавать страницу, копировать в неё текст и потом уже смотреть.

333_org_ua · December 4, 2010

Страницу в студию! Мне, например, лень создавать страницу, копировать в неё текст и потом уже смотреть.

Здравствуйте ! Вот страничка в работе http://zzz.ho.ua/

Edited December 5, 2010 by 333_org_ua

333_org_ua · December 5, 2010

Ну что разве никто не знает как мне помочь ??? (((

stars · December 5, 2010

дак вроде работает все

333_org_ua · December 5, 2010

дак вроде работает все

Я хочу привязать к кнопкам Document1, Document2, Document3, Document4, Document5 выполнение своего действия, например загрузка видеофайла или xml файла а не просто текстовую информацию. Как это сделать подскажите плиз !

still swamp · December 8, 2010

Вот вариант.

Вот код:

function clShowTab(AIDTab, AIDButton)
/*
 Функция показывает элемент с AIDTab Остальные элементы прячутся. Можно использовать как аналог закладок.
 AIDTab - id элемента закладки
 AIDButton - id элемента кнопки
*/
{
 var iObj;
 var objParent;

 var objTab=document.getElementById(AIDTab);
 if (objTab)
 {
  var objParent=objTab.parentNode;
  for(var i=0; i<objParent.childNodes.length; i++)
  {
   iObj=objParent.childNodes[i];
   if (iObj==objTab) {iObj.style.display=''} else {iObj.style.display='none'};
  }
 }

 var objButton=document.getElementById(AIDButton);
 if (objButton)
 {
  var objParent=objButton.parentNode;
  for(var i=0; i<objParent.childNodes.length; i++)
  {
   iObj=objParent.childNodes[i];
   if (iObj==objButton) {iObj.className='TabButtonActive'} else {iObj.className='TabButtonInactive'};
  }
 }
}

Edited December 8, 2010 by still swamp

Sign In

Помогите с закладками на java script !

Question

333_org_ua

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Veseloff

Link to comment

Share on other sites

333_org_ua

Link to comment

Share on other sites

333_org_ua

Link to comment

Share on other sites

stars

Link to comment

Share on other sites

333_org_ua

Link to comment

Share on other sites

still swamp

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information