button nu nasıl link haline getirebilirim?

09-05-2023, 18:51:46

Arkadaşlar html de button ile sorular arası geçiş yapıyor. İleri butonuna tıklayınca soru 2, soru 3 vs.. şeklinde ben bunu a href ekleyerek çalıştırmam için nasıl bir kod olmalı

<button class="btn btn-info next-o">İleri</button> button kodum bu bende şöyle olmasını istiyorum <a href="">İleri<a/> şeklini nasıl alır. Bu şekilde eklediğim zaman sayfa yenileniyor diğer soruya geçiş yapmıyor. bu konuda yardımcı olurmusunuz?

09-05-2023, 18:55:13

#2

Darkbey

<a href="gidilecekurl" class="btn btn-info next-o">İleri</a>

09-05-2023, 18:55:39

#3

SalihGlmk

button etiketin içine a href ekleyin hocam böylece butona basıldığında istediğiniz linke gider

09-05-2023, 18:55:58

#4

delikanli53

yazmışsınız zaten ileri yazının etrafındaki linki direkt yapıştırın ortaya butona komple link verecekseniz kodun başından başlayın sonuna a ile bitirin.

09-05-2023, 18:56:37

#5

TeknoWeb

HTML KODU :

<a href="#" id="next-btn">İleri</a>

<div id="soru1">
    <p>Bu birinci sorudur.</p>
</div>

<div id="soru2">
    <p>Bu ikinci sorudur.</p>
</div>

<div id="soru3">
    <p>Bu üçüncü sorudur.</p>
</div>

JAVASCRİPT KODU:

var currentId = 1; // Mevcut soru id'si

// İleri butonuna tıklama olayı
document.getElementById("next-btn").addEventListener("click", function() {
  currentId++; // Bir sonraki sorunun id'si

  // Yeni sayfa adresi oluşturma
  var newUrl = window.location.href.split('?')[0] + "?soru=" + currentId;

  // Yeni sayfaya yönlendirme
  window.location.href = newUrl;
});

Yukarıdaki kod, ileri butonuna tıklandığında "currentId" değişkenini artırır ve bir sonraki sorunun id'sini oluşturmak için yeni bir URL oluşturur. Son olarak, bu yeni URL'e yönlendirir.
Not: Yukarıdaki kodu kullanmadan önce, mevcut sayfanın URL'sinde sorgu parametresi olarak "soru" adında bir parametrenin varlığına dikkat etmelisiniz. Eğer yoksa, ilk soruya yönlendirilmelisiniz. Ayrıca, URL'de başka sorgu parametreleri varsa, bunları da yeni URL'de kullanmanız gerekiyor.

09-05-2023, 18:58:29

#6

LimonCreatif

Merhaba hocam bunu eğitim amaçlı mı yoksa bir proje geliştirmek için mi soruyorsunuz bilmiyorum ama eğer herhangi bir uygulama için ise React veya Vue gibi bir library kullanmanız daha esnek bir geliştirme ortamı sunacaktır.

09-05-2023, 19:01:24

#7

TeknoWeb

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

HTML KODU :

<a href="#" id="next-btn">İleri</a>

<div id="soru1">
    <p>Bu birinci sorudur.</p>
</div>

<div id="soru2">
    <p>Bu ikinci sorudur.</p>
</div>

<div id="soru3">
    <p>Bu üçüncü sorudur.</p>
</div>

JAVASCRİPT KODU:

var currentId = 1; // Mevcut soru id'si

// İleri butonuna tıklama olayı
document.getElementById("next-btn").addEventListener("click", function() {
  currentId++; // Bir sonraki sorunun id'si

  // Yeni sayfa adresi oluşturma
  var newUrl = window.location.href.split('?')[0] + "?soru=" + currentId;

  // Yeni sayfaya yönlendirme
  window.location.href = newUrl;
});

Yukarıdaki kod, ileri butonuna tıklandığında "currentId" değişkenini artırır ve bir sonraki sorunun id'sini oluşturmak için yeni bir URL oluşturur. Son olarak, bu yeni URL'e yönlendirir.
Not: Yukarıdaki kodu kullanmadan önce, mevcut sayfanın URL'sinde sorgu parametresi olarak "soru" adında bir parametrenin varlığına dikkat etmelisiniz. Eğer yoksa, ilk soruya yönlendirilmelisiniz. Ayrıca, URL'de başka sorgu parametreleri varsa, bunları da yeni URL'de kullanmanız gerekiyor.

Eğer sayfa yenilenmeden sorular arasında geçiş yapmak istiyorsanız, JavaScript kullanmanız gerekmektedir. İleri butonunu bir <a> etiketi olarak kullanmak için, href özelliğini boş bırakarak ve onclick olayını kullanarak JavaScript işlevi çağırmalısınız. İşlev, soruyu değiştirecek ve sayfa yenilenmeden yeni soruyu görüntüleyecektir.

<!DOCTYPE html>
<html>
<head>
  <title>Soru Geçişi</title>
</head>
<body>
  <div id="sorular">
    <h2>Soru 1</h2>
    <p>Bu sorunun cevabı nedir?</p>
    <button class="btn btn-info next-o" onclick="gelecekSoru()">İleri</button>
  </div>

  <div id="soru2" style="display: none;">
    <h2>Soru 2</h2>
    <p>Bu sorunun cevabı nedir?</p>
    <button class="btn btn-info next-o" onclick="gelecekSoru()">İleri</button>
  </div>

  <div id="soru3" style="display: none;">
    <h2>Soru 3</h2>
    <p>Bu sorunun cevabı nedir?</p>
    <button class="btn btn-info next-o" onclick="gelecekSoru()">İleri</button>
  </div>

  <script>
    function gelecekSoru() {
      var soruDivler = document.querySelectorAll('#sorular > div');
      var aktifSoruIndex = -1;

      // Aktif sorunun indeksini bul
      for (var i = 0; i < soruDivler.length; i++) {
        if (soruDivler[i].style.display !== 'none') {
          aktifSoruIndex = i;
          break;
        }
      }

      if (aktifSoruIndex >= 0 && aktifSoruIndex < soruDivler.length - 1) {
        soruDivler[aktifSoruIndex].style.display = 'none'; // Aktif soruyu gizle
        soruDivler[aktifSoruIndex + 1].style.display = 'block'; // Bir sonraki soruyu göster
      }
    }
  </script>
</body>
</html>

09-05-2023, 19:01:37

#8

SaLeh

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

<a href="gidilecekurl" class="btn btn-info next-o">İleri</a>

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

button etiketin içine a href ekleyin hocam böylece butona basıldığında istediğiniz linke gider

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

yazmışsınız zaten ileri yazının etrafındaki linki direkt yapıştırın ortaya butona komple link verecekseniz kodun başından başlayın sonuna a ile bitirin.

bir url adresi yok test sitesi sorular tek sayfada ama görünüm olarak ilk soru çıkıyor karşısına ve ileri butonu ile diğer soruya geçiyor ben buraya a tagı eklemem gerekiyor ki webview uygulamada ileri ileri dediği zaman geçiş reklamı çıkmalı

09-05-2023, 19:04:22

#9

Darkbey

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

bir url adresi yok test sitesi sorular tek sayfada ama görünüm olarak ilk soru çıkıyor karşısına ve ileri butonu ile diğer soruya geçiyor ben buraya a tagı eklemem gerekiyor ki webview uygulamada ileri ileri dediği zaman geçiş reklamı çıkmalı

tabs kullanabilirsiniz tabs olmaz derseniz php get yöntemi ile yapabilirsiniz