Turkhackteam.net/org - Turkish Hacking & Security Platform...  
Geri git   Turkhackteam.net/org - Turkish Hacking & Security Platform... >
Programlama
> Diğer Programlama Dilleri ve Databaseler

Sekme başlığı nasıl oluşturulur/İscorpix

Diğer Programlama Dilleri ve Databaseler

Yeni Konu aç Cevapla
 
Seçenekler
Alt 13-09-2017   #1
  • Online
  • İstihbarat Tim Asistanı
  • Genel Bilgiler
Üyelik tarihi
Sep 2012
Nereden
Trabzon
Yaş
27
Mesajlar
Konular


  
Sekme başlığı nasıl oluşturulur/İscorpix



CSS ve JavaScript ile sekme başlığı oluşturmayı göreceğiz bugün.

Düzenlenebilir Sekme Başlıkları Oluşturun

Adım 1) HTML ekle:

Kod:
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="Oslo" class="tabcontent">
  <h3>Oslo</h3>
  <p>Oslo is the capital of Norway.</p>
</div>

<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>
Belirli sekmeleri açmak için düğmeler oluşturuyoruz.Kullanıcı bir düğmeye tıkladığında o düğme ile eşleştirilen sekmeye yönlendirilir.e

Adım 2) CSS ekle:

Düğmeleri ve sekme içeriğini stillendirin:

Kod:
/* Style the tab buttons */
.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 25%;
}

/* Change background color of buttons on hover */
.tablink:hover {
    background-color: #777;
}

/* Set default styles for tab content */
.tabcontent {
    color: white;
    display: none;
    padding: 50px;
    text-align: center;
}

/* Style each tab content individually */ 
#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}

Adım 3) JavaScript ekle:

Kod:
function openCity(cityName, elmnt, color) {
    // Hide all elements with class="tabcontent" by default */
    var i, tabcontent, tablinks;
    tabcontent = d ocument.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Remove the background color of all tablinks/buttons
    tablinks = d ocument.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }

    // Show the specific tab content
    d ocument.getElementById(cityName).style.display = "block";

    // Add the specific color to the button used to open the tab content
    elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
d ocument.getElementById("defaultOpen").click();
Not: d ocument yazan yerlerdeki boşlukları silin.İçeriği kendinize göre editleyin.
    
Online
 
Alıntı ile Cevapla
Alt 13-09-2017   #2
  • Offline
  • Tamamen Forumdan Uzaklaştırıldı
  • Genel Bilgiler
Üyelik tarihi
Aug 2017
Mesajlar
Konular
3


  


Eline emegine sağlık
    
Offline
 
Alıntı ile Cevapla
Alt 13-09-2017   #3
  • Online
  • İstihbarat Tim Asistanı
  • Genel Bilgiler
Üyelik tarihi
Sep 2012
Nereden
Trabzon
Yaş
27
Mesajlar
Konular


  


teşekkürler
    
Online
 
Alıntı ile Cevapla
Alt 13-09-2017   #4
  • Offline
  • Asteğmen
  • Genel Bilgiler
Üyelik tarihi
Aug 2017
Mesajlar
Konular


  


Thank you
    
Offline
 
Alıntı ile Cevapla
Alt 13-09-2017   #5
  • Online
  • İstihbarat Tim Asistanı
  • Genel Bilgiler
Üyelik tarihi
Sep 2012
Nereden
Trabzon
Yaş
27
Mesajlar
Konular


  


teşekkürler
    
Online
 
Alıntı ile Cevapla
Cevapla

Bookmarks

Seçenekler

Yetkileriniz
Sizin Yeni Konu Acma Yetkiniz var yok
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodları Kapalı
Trackbacks Kapalı
Pingbacks Kapalı
Refbacks Kapalı


Bilgilendirme Turkhackteam.net/org
Sitemizde yer alan konular üyelerimiz tarafından açılmaktadır.
Bu konular yönetimimiz tarafından takip edilsede gözden kaçabilen telif hakkı olan veya mahkeme kararı çıkmış konular sitemizde bulunabilir. Bu tür konuları bize turkhackteamiletisim [at] gmail.com adresine mail atarak bildirdiğiniz takdirde en kısa sürede konular hakkında gerekli işlemler yapılacaktır.
Please Report Abuse, DMCA, Harassment, Scamming, Warez, Crack, Divx, Mp3 or any Illegal Activity to turkhackteamiletisim [at] gmail.com


Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz, bu sitelerin güvenlik açıklarını site sahibine bildirmek için çaba sarfeder.
Turkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Turkhackteam sorumlu değildir. Sitelerinize Turkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.



         

Powered by vBulletin® Copyright ©2000 - 2017

TSK Mehmetçik Vakfı

Türk Polis Teşkilatını Güçlendirme Vakfı



Google Links
instagram Takipçi Hilesi

wau

Search Engine Friendly URLs by vBSEO 3.6.0 ©2011, Crawlability, Inc.