php html sorunu

06-08-2023, 02:06:08

slider şeklinde müşteri yorum sayfası yapıyorum ve sayfanın altına sıra butonları koymak istiyorum mesela 5.kutucuga tıklayınca ekrana 5.yorum , 4. kutucukta 4.sorum gelsin istiyorum hrefleri nasıl vermem gerek bilgisi olan varmı?

<div class="musyorum" style="font-size:17px;">

                                            <div style="padding:20px;">

                                                yorum11
                                            </div>

                                        </div>

                                        <div class="yorumyapan">

                                            <div id="mgorusarrow"><i class="ion-android-arrow-dropdown"></i></div>

                                            <img src="" alt=" Gülistan Ağçal" title=" Gülistan Ağçal" width="80" height="80">



                                            <h3> Gülistan Ağçal</h3>
                                            
                                        </div>

                                    </li></ul></div>

                        <div class="clearfix"></div>

                        <div id="pager2" class="pager" style="display: block;"><a href="#" class=""><span>1</span></a><a href="#" class="selected"><span>2</span></a><a href="#"><span>2</span></a><a href="#2"><span>3</span></a><a href="#"><span>4</span></a><a href="#"><span>5</span></a></div><div class="musyorum" style="font-size:17px;">

                                            <div style="padding:20px;">

                                                                                                yorum11
                                            </div>

                                        </div>

                                        <div class="yorumyapan">

                                            <div id="mgorusarrow"><i class="ion-android-arrow-dropdown"></i></div>

                                            <img src="                                                yorum11 alt=" Gülistan Ağçal" title=" Gülistan Ağçal" width="80" height="80">



                                            <h3> Gülistan Ağçal</h3>
                                            
                                        </div>

                                    </li></ul></div>

                        <div class="clearfix"></div>

                        <div id="pager2" class="pager" style="display: block;"><a href="#" class=""><span>1</span></a><a href="#" class="selected"><span>2</span></a><a href="#"><span>2</span></a><a href="#2"><span>3</span></a><a href="#"><span>4</span></a><a href="#"><span>5</span></a></div>

06-08-2023, 02:20:48

#2

Misafir
Tabii, sıra butonlarını eklemek için JavaScript kullanabilirsiniz. Örnek olarak, HTML ve JavaScript kodları aşağıda verilmiştir:

HTML:
```html

<div id="yorumlar">
<div class="musyorum">
<div style="padding: 20px;">
Yorum 1
</div>
</div>
<div class="yorumyapan">
<div class="yorum-sira">1</div>
<h3>Gülistan Ağçal</h3>
</div>



<div class="musyorum">
<div style="padding: 20px;">
Yorum 2
</div>
</div>
<div class="yorumyapan">
<div class="yorum-sira">2</div>
<h3>Gülistan Ağçal</h3>
</div>


</div>


<div id="sira-butonlari">
<button class="sira-buton" data-sira="1">1</button>
<button class="sira-buton" data-sira="2">2</button>

</div>
```

JavaScript:
```js
// Sıra butonlarına tıklama işlemi
const siraButonlar = document.querySelectorAll(".sira-buton");
const yorumlar = document.querySelectorAll(".musyorum");

siraButonlar.forEach((buton) => {
buton.addEventListener("click", () => {
const sira = parseInt(buton.dataset.sira);
gosterYorum(sira);
});
});

// Yorumları gösteren fonksiyon
function gosterYorum(sira) {
yorumlar.forEach((yorum) => {
yorum.style.display = "none";
});

yorumlar[sira - 1].style.display = "block";
}
```

Bu kod, yorumları slider şeklinde gösterir ve altına sıra butonları ekler. Her butona tıklandığında, ilgili yorumu gösterir. "data-sira" özelliği, hangi yoruma geçileceğini belirlemek için kullanılır. İlgili yorumun sırasını belirlemek için bu değeri kullanıyoruz.

Siz bu kodu sayfanızda kullanabilir ve yorumları göstermek istediğiniz gibi düzenleyebilirsiniz. Ayrıca daha fazla yorum eklemek isterseniz, HTML bölümünde yorumları ve sıra butonlarını çoğaltabilirsiniz.
EnginAYDIN bunu beğendi.

1 kişi bunu beğendi.

10-08-2023, 06:07:19

QuarkChain

Şöyle bir şey umarım fikir verir;

<?php
$yorumlar = array();

$yorumlar[] = (object) array(
  'adsoyad' => 'Elif Y.',
  'puan' => rand(1, 5),
  'mesaj' => 'Bu harika yorum slider sayesinde kullanıcı yorumlarına hızlıca göz atabiliyorum. Gerçekten etkileyici bir tasarım!',
  'tarih' => '10 Ağustos Çarşamba'
);

$yorumlar[] = (object) array(
  'adsoyad' => 'Mehmet A.',
  'puan' => rand(1, 5),
  'mesaj' => 'Yorum slider sayesinde ürün hakkındaki diğer müşterilerin düşüncelerine kolayca erişebiliyorum. Çok kullanışlı!',
  'tarih' => '8 Ağustos Pazartesi'
);

$yorumlar[] = (object) array(
  'adsoyad' => 'Ayşe K.',
  'puan' => rand(1, 5),
  'mesaj' => 'Slider arayüzü muhteşem! Ürünün ne kadar kaliteli olduğunu görmek için bu yorumlara bayılıyorum.',
  'tarih' => '6 Ağustos Cumartesi'
);

$yorumlar[] = (object) array(
  'adsoyad' => 'Ali V.',
  'puan' => rand(1, 5),
  'mesaj' => 'Yorumları gezmek için harika bir yolu var! Ürün hakkında daha fazla bilgi edinmek için bu slider\'ı kullanmaktan mutluluk duyuyorum.',
  'tarih' => '4 Ağustos Perşembe'
);

$yorumlar[] = (object) array(
  'adsoyad' => 'Zeynep S.',
  'puan' => rand(1, 5),
  'mesaj' => 'Ekrandaki bu yorum slider\'ı sayesinde alışveriş yaparken daha fazla güven duyuyorum. Teşekkürler!',
  'tarih' => '2 Ağustos Salı'
);
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rubik:400,500,600,700,800&subset=latin-ext">
  <link rel="stylesheet" type="text/css" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css">
  <title>Yorumlar</title>
  <style>
    body {
      font-family: Rubik;
      font-size: 15px;
      background-color: #f0f0f0;
      padding-top: 55px;
    }
    .yorum-alani {
      max-width: 760px;
      margin: 0 auto;
      padding: 0 35px;
      justify-content: center;
    }
    .yorumlar {
      position: relative;
      min-height: 200px;
    }
    .yorum {
      position: absolute;
      box-sizing: border-box;
      background-color: #fff;
      box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      margin: 0 auto;
      margin-bottom: 2em;
      padding: 20px;
      line-height: 27px;
      opacity: 0;
      display: flex;
      transition: opacity .3s;
      width: 100%;
      z-index: 0;
    }

    .yorum.aktif {
      z-index: 1;
      left: 0;
      opacity: 1;
    }

    .yorum-resim {

    }

    .yorum-isim {
      font-weight: 500;
    }

    .yorum-resim {
      margin-right: 20px;
    }

    .yorum-tarih {
      opacity: .5;
      font-size: 12px;
      margin-top: 5px;
    }

    .yorum-foto {
      display: flex;
      width: 76px;
      height: 76px;
      border-radius: 100%;
      border: 1px solid #eee;
      padding: 2px;
    }

    .yorum-foto span {
      width: 100%;
      height: 100%;
      background-color: #f0f0f0;
      border-radius: 70px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }

    .yorum-icerik {
    }

    .yorum-puan {
      color: #ffc109;
    }

    .yorumlar {
      max-width: 740px;
      margin: 0 auto;
    }

    .sayfalama {
      display: flex;
      padding: 15px;
      border-top: 1px solid rgba(227, 230, 237, 1);
    }

    .sayfalama .sayilar {
      margin-left: auto;
    }

    .sayfalama .sayilar ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .sayfalama .sayilar ul li {
      margin-left: 0.25rem;
      margin-right: 0.25rem;
    }

    .sayfalama .sayilar ul li a {
      display: block;
      text-decoration: none;
      padding: 5px .75rem;
      color: #3e465b;
    }

    .sayfalama .sayilar ul li a.aktif {
      background-color: #3874ff;
      color: #fff;
      border-radius: 0.375rem;
    }

    .sayfalama .sayilar ul li:last-child {
      margin-right: 0;
    }

    .sayfalama .sonuc span {
      color: rgba(110, 120, 145, 1);
      margin: 0 .3rem;
    }
  </style>
</head>
<body>
  <div class="yorum-alani">
    <div class="yorumlar">
      <?php foreach ($yorumlar as $indeks => $yorum): ?>
        <div class="yorum<?php echo ( ! $indeks ? " aktif" : ""); ?>">
          <div class="yorum-resim">
            <div class="yorum-foto"><span></span></div>
          </div>
          <div class="yorum-icerik">
            <div class="yorum-isim">
              <span><?php echo $yorum->adsoyad; ?></span>
              <div class="yorum-puan">
                <?php for($i=1; $i<=$yorum->puan; $i++): ?>
                  <i class="fa fa-star"></i>
                <?php endfor; ?>
              </div>
            </div>
            <div class="yorum-mesaj"><?php echo $yorum->mesaj; ?></div>
            <div class="yorum-icerik">
              <div class="yorum-tarih"><i class="fa fa-clock"></i> <?php echo $yorum->tarih; ?></div>
            </div>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
    <div class="sayfalama">
      <div class="sonuc">
        Müşteri yorumları <span>1/<?php echo sizeof($yorumlar); ?></span>
      </div>
      <div class="sayilar">
        <ul>
          <?php for ($i=1;$i<=sizeof($yorumlar);$i++): ?>
            <li><a href="javascript:void(0);"<?php echo ($i==1?' class="aktif"' : ''); ?>><?php echo $i; ?></a></li>
          <?php endfor; ?>
        </ul>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
  <script>
    $(".sayfalama ul li a").click(function(){
      $(".yorumlar .yorum.aktif, .sayfalama a.aktif").removeClass("aktif");
      $(".yorumlar .yorum").eq($(this).parent().index()).addClass("aktif");
      $(this).addClass("aktif");
      $(".sayfalama .sonuc span").text($(this).text() + "/" + $(".yorumlar .yorum").length);
    });
  </script>
</body>
</html>