jquery ile div içeriklerini değiştirmek?

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme PHP / CGI jquery ile div içeriklerini değiştirmek?

Bu konudaki kullanıcılar: 1 misafir, 1 mobil kullanıcı

2
Cevap 1078
Tıklama 0
Öne Çıkarma

1. sayfa

jquery ile div içeriklerini değiştirmek?

Cevap Yaz

hulk94

Doğum gününü kutla!
9 yıl

Onbaşı

Konu Sahibi

Arkadaşlar merhabalar
Siteme bir menu yapmaya çalışıyorum fakat beceremiyorum.
Menü tam olarak "şunun" gibi.
Bilgi, haberler ve oyun rehberi gibi bölümler olacak ve hangi bölüm aktifse bu sekilde rengi farklı olacak şekilde bir seyler istiyorum.

Bu içerikleri başka sayfalardan include ederek çekmek yerine buradaki gibi div içerisinde olsun istiyorum.
Buradan inceleyerekte bir şeyler çıkaramadım, internette de istedigim gibi bir makale bulamadım.
Yardımlarınız için teşekkür ediyorum, bana bir yol gösterin lütfen :))

< Bu mesaj bu kişi tarafından değiştirildi hulk94 -- 24 Mayıs 2016; 2:06:59 >

BasiliKalanCtrl

9 yıl

Yüzbaşı

Hocam aradığınız şeyin ismi sekme.

jQuery ile tab yapımı diye aratın sayısız kaynak bulursunuz.

aşağıda senin için .html olarak bir tane yarattım, .html'sayfası oluşturup kodları sayfaya dahil et, ardından incele, sonrasında da kendi sitene ekleyebilirsin.

 
  <!DOCTYPE html> 
  <html lang="en"> 
  <head> 
  	<meta charset="UTF-8"> 
  	<title>Tab Uygulaması</title> 
   
  	<!-- jQuery --> 
  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
  	<script> 
  		$(function(){ 
   
  			$("ul li:first").addClass('active'); 
  			$("div.tab_content:not(:first)").hide(); 
   
  			$("ul#tab li").click(function(){ 
   
  				var index = $(this).index(); 
  				$("ul li").removeClass('active'); 
  				$("ul li:eq("+index+")").addClass('active'); 
  				$("div.tab_content").slideUp(); 
  				$("div.tab_content:eq("+index+")").slideDown(); 
   
  				return false 
   
  			}); 
   
  		}); 
  	</script> 
  	<style> 
   
  		body {font: 12px Arial;}	 
  		ul, li {padding: 0;margin: 0; list-style: none;} 
  		a {text-decoration: none;} 
   
  		ul#tab {margin-bottom: 10px; height: 25px;} 
  		ul#tab li {display: inline-block; margin-right: 5px;} 
  		ul#tab li a {background-color: #fff; display: block; border: 1px solid #bbb; padding: 4px 10px; color: #333; border-top-color: #e1e1e1; border-left-color: #e1e1e1;} 
  		ul#tab li.active a {background-color: #333; color: #fff; border-color: #333} 
  	 
  		div.tab_content {border: 2px solid #ddd; padding: 10px; color: #aaa;} 
  	 
  	</style> 
  </head> 
  <body> 
  	<ul id="tab"> 
  		<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=117115658&url=#" data-href="#">1. Tab</a></li> 
  		<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=117115658&url=#" data-href="#">2. Tab</a></li> 
  		<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=117115658&url=#" data-href="#">3. Tab</a></li> 
  	</ul> 
  	<div class="tab_content">1. Tab</div> 
  	<div class="tab_content">2. Tab</div> 
  	<div class="tab_content">3. Tab</div> 
  </body> 
  </html>

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @hulk94

hulk94

Doğum gününü kutla!
9 yıl

Onbaşı

Konu Sahibi

Hocam hay çok yaşa bu şekilde aramak aklıma hiç gelmedi :)
Teşekkür ediyorum, sağ olun

< Bu ileti mobil sürüm kullanılarak atıldı >

Bu mesajda bahsedilenler: @BasiliKalanCtrl

Cevap Yaz

1. sayfa

Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme PHP / CGI jquery ile div içeriklerini değiştirmek?