Seçili optionun indis değerine göre div açmak

03-02-2015, 11:57:20

Secilen optionun indis değerine göre divlerin açılmasını istiyorum bunu ul li iciın click olayı ile yapabiliyoruz ancak option icin seçme anlamına gelen olayı bilmiyorum.

Kodlarım şu şekilde bunun aynısının select halini rica ediyorum.

Şimdiden Teşekkürler.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Deneme</title>

<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$("div.tab_content").hide();
	$("div.tab_content:first").show();
	
	$("ul#tab li").click(function(e){
		
		var index = $(this).index();
		$("div.tab_content").hide(300);
		$("div.tab_content:eq(" + index + ")").show(300);
		return false
		
		});
	
	});
</script>

<style type="text/css">
body{font:12px Arial;}
ul,li{
	padding:0;
	margin:0;
}
ul#tab li{}

.tab_content{border:2px solid #ddd; padding:10px; color:#aaa; margin-top:10px;}
</style>

</head>
<body>

<ul id="tab">
<li>1.tab</li>
<li>2.tab</li>
<li>3.tab</li>
</ul>
<!-- 
burası için yapmak istiyorum
<select>
<option>1.tab</option>
<option>2.tab</option>
<option>3.tab</option>
</select>
-->
<div class="tab_content">1. Tab içeriği</div>
<div class="tab_content">2. Tab içeriği</div>
<div class="tab_content">1. Tab içeriği</div>


</body>
</html>

03-02-2015, 12:13:50

#2

Retreat

select on change ile yapabilirsin.

03-02-2015, 12:44:25

#3

Frknozsoy

Retreat adlı üyeden alıntı: mesajı görüntüle

select on change ile yapabilirsin.

Nasıl yapıldığını tam olarak bilmiyorum bunun üzerinde uygulayıp verebilirseniz çok sevinirim.

03-02-2015, 13:04:27

#4

~~CssValley~~

Üyeliği durduruldu

Frknozsoy adlı üyeden alıntı: mesajı görüntüle

Secilen optionun indis değerine göre divlerin açılmasını istiyorum bunu ul li iciın click olayı ile yapabiliyoruz ancak option icin seçme anlamına gelen olayı bilmiyorum.

Kodlarım şu şekilde bunun aynısının select halini rica ediyorum.

Şimdiden Teşekkürler.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Deneme</title>

<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$("div.tab_content").hide();
	$("div.tab_content:first").show();
	
	$("ul#tab li").click(function(e){
		
		var index = $(this).index();
		$("div.tab_content").hide(300);
		$("div.tab_content:eq(" + index + ")").show(300);
		return false
		
		});
	
	});
</script>

<style type="text/css">
body{font:12px Arial;}
ul,li{
	padding:0;
	margin:0;
}
ul#tab li{}

.tab_content{border:2px solid #ddd; padding:10px; color:#aaa; margin-top:10px;}
</style>

</head>
<body>

<ul id="tab">
<li>1.tab</li>
<li>2.tab</li>
<li>3.tab</li>
</ul>
<!-- 
burası için yapmak istiyorum
<select>
<option>1.tab</option>
<option>2.tab</option>
<option>3.tab</option>
</select>
-->
<div class="tab_content">1. Tab içeriği</div>
<div class="tab_content">2. Tab içeriği</div>
<div class="tab_content">1. Tab içeriği</div>


</body>
</html>

Çalışan örneği

http://codepen.io/CssValley/pen/XJeVJG

kodlar:

$(function(){
   $("div.tab_content").hide();
   $("div.tab_content:first").show();
    
   $("select").change(function(){
       
     var i = $("select option:selected").index();
     
    $("div.tab_content").hide();
    $("div.tab_content:eq("+i+")").show();
     
       
      });
    
   });

 
<select>
<option>1.tab</option>
<option>2.tab</option>
<option>3.tab</option>
</select>
 
<div class="tab_content">1. Tab içeriği</div>
<div class="tab_content">2. Tab içeriği</div>
<div class="tab_content">3. Tab içeriği</div>

03-02-2015, 13:05:09

#5

Frknozsoy

Retreat adlı üyeden alıntı: mesajı görüntüle

select on change ile yapabilirsin.

En son bu hale getirebildim ancak her değiştiğinde 1. tabı aktif ediyor

<script type="text/javascript">

	$(document).ready(function(){
		$("div.tab_content").hide();
		$("div.tab_content:first").show();
		$("#selectmenu1").change(function(){
			var index = $(this).index();
			$("div.tab_content").hide(300);
			$("div.tab_content:eq(" + index + ")").show(300);
		});
	});
</script>

03-02-2015, 13:10:43

#6

~~CssValley~~

Üyeliği durduruldu

furkan bi üst mesaja bak