0
Kayıt Ol

Tab Menü mantığı ?

3

●

1.818

  • 11-08-2012, 22:15:48
    #1
    KorkakHerif
    KorkakHerif
    Üyeliği durduruldu
    Arkadaşlar tab menü yapmaya çalışıyordum ama bi yerde tıkandım sadece o taba ait konuları listeletmek istiyorum bir tek onu yapamadım kodlamam şu şekilde tab1'e tıkladığımda tab1'e ait konuları listeletsin istiyorum , nasıl yapacağımı detaylı bir şekilde açıklayacak olan var mı acaba ?

    HTML ve jQuery Yapım
    <!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>jQuery Öğreniyoruz</title>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		$("document").ready(function(){
			$(".icerik").hide();
			$(".icerik:first").show();
			$("#menu ul li:first").addClass("aktif");
			
			$("#menu ul li").click(function(){
				$("#menu ul li").removeClass("aktif");
				$(this).addClass("aktif");
				$(".icerik:first").hide();
				var	aTab	=	$(this).find("a").attr("href");
				$(aTab).show();
			});
		});
	</script>
<style type="text/css">
body	{font:12px tahoma;}
#menu		{height:25px;background:#eee;border:1px solid #ddd;padding:3px;}
#menu  ul	{list-style:none;padding:0;margin:0;}
#menu	ul	li	{float:left;padding:0 20px;}
#menu	ul	li	a	{display:block;line-height:25px;text-decoration:none;color:#000;}
.aktif					{color:#c03;font-weight:bold;}

.icerik	{padding:5px;border:1px solid #ccc;}
</style>
</head>
<body>
				<div id="wrapper">
					<div id="menu">
					<ul>
						<li><a href="#tab1">Sekme 1</a></li>
						<li><a href="#tab2">Sekme 2</a></li>
						<li><a href="#tab3">Sekme 3</a></li>
					</ul>
					</div>
					<div class="icerik" id="tab1">Bu bir içeriktir 1</div>
					<div class="icerik" id="tab2">Bu bir içeriktir 2</div>
					<div class="icerik" id="tab3">Bu bir içeriktir 3</div>
				</div>
</body>
</html>
  • 12-08-2012, 11:48:33
    #2
    KorkakHerif
    KorkakHerif
    Üyeliği durduruldu
    Arkadaşlar gerek kalmadı uğraşarak çözdüm;

    <!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>jQuery Öğreniyoruz</title>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		$("document").ready(function(){
			$(".tab_icerik").hide();
			$("ul li:first").addClass("aktif");
			$(".tab_icerik:first").show();
			$("ul li").click(function(){
				$("ul li").removeClass("aktif");
				$(this).addClass("aktif");
				$(".tab_icerik").hide();
				indis	=	$(this).index();
				$(".tab_icerik:eq("+indis+")").slideDown();
			});
		});
	</script>
<style type="text/css">
.clear{clear:both;}
ul	{list-style:none;margin:0;padding:0;height:30px;background:#f0f0f0;border:1px solid #ccc;font:12px tahoma;width:500px;}
ul li	{float:left;}
ul li a	{display:block;line-height:30px;text-decoration:none;padding:0 10px;}

.tab_icerik	{padding:10px;border:1px solid #ccc;width:480px;}

.aktif	{background:#fff;color:#c03;}
</style>
</head>
<body>
				<div id="wrapper">
					<ul>
						<li><a href="#">Tab1</a></li>
						<li><a href="#">Tab2</a></li>
						<li><a href="#">Tab3</a></li>
						<li><a href="#">Tab4</a></li>
					</ul>
					<div class="clear"></div>
					<div class="tab_icerik">Tab1'e ait içerik</div>
					<div class="tab_icerik">Tab2'e ait içerik</div>
					<div class="tab_icerik">Tab3'e ait içerik</div>
					<div class="tab_icerik">Tab4'e ait içerik</div>
				</div>
</body>
</html>
  • 13-08-2012, 19:47:51
    #3
    Vody
    Vody
    Üyeliği durduruldu
    KorkakHerif adlı üyeden alıntı: mesajı görüntüle
    Arkadaşlar gerek kalmadı uğraşarak çözdüm;
    <!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>jQuery Öğreniyoruz</title>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		$("document").ready(function(){
			$(".tab_icerik").hide();
			$("ul li:first").addClass("aktif");
			$(".tab_icerik:first").show();
			$("ul li").click(function(){
				$("ul li").removeClass("aktif");
				$(this).addClass("aktif");
				$(".tab_icerik").hide();
				indis	=	$(this).index();
				$(".tab_icerik:eq("+indis+")").slideDown();
			});
		});
	</script>
<style type="text/css">
.clear{clear:both;}
ul	{list-style:none;margin:0;padding:0;height:30px;background:#f0f0f0;border:1px solid #ccc;font:12px tahoma;width:500px;}
ul li	{float:left;}
ul li a	{display:block;line-height:30px;text-decoration:none;padding:0 10px;}
.tab_icerik	{padding:10px;border:1px solid #ccc;width:480px;}
.aktif	{background:#fff;color:#c03;}
</style>
</head>
<body>
				<div id="wrapper">
					<ul>
						<li><a href="#">Tab1</a></li>
						<li><a href="#">Tab2</a></li>
						<li><a href="#">Tab3</a></li>
						<li><a href="#">Tab4</a></li>
					</ul>
					<div class="clear"></div>
					<div class="tab_icerik">Tab1'e ait içerik</div>
					<div class="tab_icerik">Tab2'e ait içerik</div>
					<div class="tab_icerik">Tab3'e ait içerik</div>
					<div class="tab_icerik">Tab4'e ait içerik</div>
				</div>
</body>
</html>
    Uğraşman çok güzel yalnız bu tür şeyleri eklenti ile halletmek daha mantıklı geliyor bana.. Çünkü hem açığı, bozuğu az oluyor hemde dinamik oluyor..