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
  • Yarbay
  • Üye Bilgileri
Üyelik tarihi
09/2012
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.
    
 Offline  
 
Alıntı ile Cevapla
Alt 13-09-2017   #2
  • Tamamen Forumdan Uzaklaştırıldı
  • Üye Bilgileri
Üyelik tarihi
08/2017
Mesajlar
Konular
3


  


Eline emegine sağlık
    
 Offline  
 
Alıntı ile Cevapla
Alt 13-09-2017   #3
  • Yarbay
  • Üye Bilgileri
Üyelik tarihi
09/2012
Mesajlar
Konular


  


teşekkürler
    
 Offline  
 
Alıntı ile Cevapla
Alt 13-09-2017   #4
  • Asteğmen
  • Üye Bilgileri
Üyelik tarihi
08/2017
Mesajlar
Konular


  


Thank you
    
 Offline  
 
Alıntı ile Cevapla
Alt 13-09-2017   #5
  • Yarbay
  • Üye Bilgileri
Üyelik tarihi
09/2012
Mesajlar
Konular


  


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

Bookmarks

Seçenekler


Bilgilendirme Turkhackteam.net/org
Sitemizde yer alan konular üyelerimiz tarafından paylaşılmaktadır.
Bu konular yasalara uygunluk ve telif hakkı konusunda yönetimimiz tarafından kontrol edilse de, gözden kaçabilen içerikler yer alabilmektedir.
Bu tür konuları turkhackteamiletisim [at] gmail.com mail adresimize bildirebilirsiniz, konular hakkında en kısa sürede 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.
Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam 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 - 2018

TSK Mehmetçik Vakfı

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



Google+

wau

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