Atagni bosganda aniq divni ko'rsatish. Va boshqa div'llarni yashir

Men jQuery va kodlash uchun umuman yangisanman. Men bunga bir nechta muammolarni ko'raman.

Men xohlagan narsam sahifa yuklanganda, "Vlogging" aloqasi faol va "Tafsilotlar 1" ko'rsatiladi. So'ngra "Filmmaking" yoki "Beme" tugmasini bosganingizda ... 2 yoki 3 tafsilotlar ko'rsatiladi va u erda hech kim yo'qoladi.

Men hozirgacha to'g'ri qarorga kelgan narsam bor, shuning uchun boshqa ma'lumotlardan birini bosganingizda to'g'ri "Tafsilotlar" matni o'zini ko'rsatishi kerak.

Sizga juda minnatdorman va hozirda bir skripka ichida bor!

http://jsfiddle.net/t1huc43d/

Moslashtirilgan ehtiyojlardan ko'ra kod:

$(function() {
   $("togglediv1").click(function() {
      $("#togglediv1").removeClass("display-start");
      $("li").removeClass("display");
      $(this).addClass("display");
   });
});
1
O'z sahifangizda yorliqlarni amalga oshirish uchun ko'plab plaginlar mavjud.
qo'shib qo'ydi muallif Barmar, manba
Siz yuqoriga ko'tarilishingizga hojat yo'q, faqat tanlangan javob sifatida belgilashingiz kerak.
qo'shib qo'ydi muallif sleeyuen, manba
Barchangizga juda ham rahmat! O'ylaymanki, sizni yuqoriga ko'tarish uchun obro'siga ega emasman, lekin barchangizga tashakkur. Sizning har bir javobingiz ishni qilayotganday tuyuladi va men buni juda yaxshi tushunishga yordam berdingiz. Yana bir bor rahmat!
qo'shib qo'ydi muallif Warren Breedlove, manba

6 javoblar

Updated jsfiddle: http://jsfiddle.net/t1huc43d/3/

O'zingizning identifikatorlari tıklandığında va nima bo'lmasin, tomosha qilish uchun qulay bo'lmaganligi uchun, batafsil ma'lumotlarga muvofiq yozishni bosgan narsani topish uchun this -ni ishlatishga qaror qildim.

Yangilangan javascriptingiz:

$(function() {
   $("li").click(function() {
      $("#togglediv1").removeClass("active-start");
      $("li").removeClass("active");
      $(this).addClass("active");
      let temp = $("#divtoggle").children();
            var index;

      for (let i = 0; i < temp.length; i++)
      {
        if (this == temp[i] )
        {
            index = i;
          break;
        }
      }

      $(".display-start").addClass("display");
      $(".display-start").removeClass("display-start");

          let text_children = $(".text").children()
      let the_child = text_children[index];
            $(text_children[index]).addClass("display-start");
      $(text_children[index]).removeClass("display");
   });
});
0
qo'shib qo'ydi

Mana. CSS-ni biroz soddalashtirildi. Yuqoridagi havolalarda .activ sinfini va matn divsidagi .display sinfini almashtirish. Bog'ni bosganingizda, kod bu ulanishning $. Index() kodini ko'rsatadigan matn divining indeksidan foydalanadi. Shunday qilib, 2-bandi ustiga bosganingizda, 2-matn qutisi ko'rsatiladi.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(function() {
   $toggleLinks = $('#divtoggle a'),
   $displays = $('.text div');
   
   $toggleLinks.on('click', function(e) {
     e.preventDefault();
     $toggleLinks.removeClass('active');
     $(this).addClass('active');
     $displays.removeClass('display');
     $displays.eq($(this).closest('li').index()).addClass('display');
   });
});
li {
  color: grey;
  font: effra;
  font-weight: bold;
}

a:hover {
  color: #aaaaaa;
  cursor: pointer;
}

.active {
  color: orange;
}

.text div {
  display: none;
}

.text .display {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">

  
  <div class="text">
    <div class='display'>Details 1</div>
    <div>Details 2</div>
    <div>Details 3</div>
  </div>

</div>
</div> </div>

0
qo'shib qo'ydi

Ushbu kod sizni ko'p vaqt saqlaydi . Men "ma'lumot" deb nomlangan maxsus atributni qo'shdim. Ushbu xususiyat siz ko'rsatmoqchi bo'lgan yorliqqa bog'lanish uchun ishlatiladi. Ushbu kod qo'shimcha yorliqlarni qo'shishni osonlashtiradi va hokazo. O'zgartirilgan HTML va JavaScript uchun pastga qarang.

<div id="wrap">


<div class="text">
    <div class="tab" data="1">Details 1</div>
    <div class="tab" data="2">Details 2</div>
    <div class="tab" data="3">Details 3</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function() {
  $(".link").click(function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
    dataAttr = $(this).attr("data");
    $(".tab").hide();
    $(".tab[data="+dataAttr+"]").show();
  });
  $(".link:first").click();
});
</script>
0
qo'shib qo'ydi
$(function() {
   $("#togglediv1").click(function() {
      $("#one").removeClass("display");
      $("#one").addClass("display-start");
      $("#two").removeClass("display-start");
      $("#two").addClass("display");
      $("#three").removeClass("display-start");
      $("#three").addClass("display");
   });
});

$(function() {
   $("#togglediv2").click(function() {
      $("#one").removeClass("display-start");
      $("#one").addClass("display");
      $("#two").removeClass("display");
      $("#two").addClass("display-start");
      $("#three").addClass("display");
      $("#three").removeClass("display-start");
   });
});

...

0
qo'shib qo'ydi

JQuery aslida sizga yordam beradigan ba'zi qismlarga ega, ammo men uchun bu eng qisqa va eng qulay usul:

Birinchidan, men har bir titulning 1 kodini id ga qo'yib, ularni 1 ga ko'paytirmoqchi edim.

<div id="wrap">
    
    <div class="text">
        <div class='display' id="detail-1">Details 1</div>
        <div class='display' id="detail-2">Details 2</div>
        <div class='display' id="detail-3">Details 3</div>
    </div>
</div>

Shundan so'ng, jQuery juda oddiy. Sinf sarlavhasi da bir tugma hodisasini sozlang. Birinchi narsa - tıklanan nomning id »ni ajralishdir. Buni ko'rganingizdan so'ng, tegishli tafsilotni aniqlang va ko'rsatasiz:

$(document).ready(function() {

   $(".title").click(function() {

     //*** get id
     var id = $(this).attr("id").split("-")[1];
     if (typeof id != "undefined"){

       //*** hide other descriptions and show yours
       $(".display").hide();
       $("#detail-" + id).show();
     }

   });

});

DEMO: http://jsbin.com/volikofihe/edit?html , JS, konsol, chiqish

0
qo'shib qo'ydi

Preserved as much of your existing code as possible. Updated fiddle.

Men sizning har bir elementingiz uchun maxsus ma'lumotni tekshirgandim, ularni tegishli ma'lumotlarning har biriga bog'lash uchun:

  • Vlogging
  • 
    
  • Filmmaking
  • 
    
  • Beme
  • 
    

    So'ngra JavaScript-ni yangilab, sinxronlashtirishni o'chirib qo'ydim.

    0
    qo'shib qo'ydi
    Javascript UZB
    Javascript UZB
    99 ishtirokchilar

    @js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb