javascript - w3schools - كيف يمكنك مبادلة ديف على تمرير الماوس؟(مسج؟)




list jquery (4)

الشيء الوحيد الذي هو الخطأ في هذا الرمز (على الأقل بالنسبة لي) هو أنك لا تستخدم حلقة لمعالجة جميع العناصر. بخلاف ذلك، لماذا لا على هذا النحو؟

ومع حلقة، يعني الاستيلاء على عنصر الحاوية عن طريق مسج وتكرار على جميع العناصر الطفل - في الأساس بطانة واحدة.

هذا أكثر يكون الثاني الأكثر بسيطة تأثير التمديد، لا يزال أنا لا أجد أي حل بسيط.

مطلوب: لدي قائمة من البنود و كوريسبودينغ قائمة الشرائح (ديف). بعد التحميل، يجب تحديد عنصر القائمة الأول (عريض)، ويجب أن تكون الشريحة الأولى مرئية. عند تمرير المستخدم فوق عنصر قائمة آخر، يجب تحديد عنصر القائمة بدلا من ذلك وعرض الشريحة المقابلة.

تعمل التعليمات البرمجية التالية، ولكنها فظيعة . كيف يمكنني الحصول على هذا السلوك بطريقة أنيقة؟ مسج لديها العشرات من آثار التمرير المتحركة ومعقدة، ولكن لم أخرج مع وسيلة نظيفة لهذا الغرض.

<script type="text/javascript">
function switchTo(id) {
    document.getElementById('slide1').style.display=(id==1)?'block':'none';
    document.getElementById('slide2').style.display=(id==2)?'block':'none';
    document.getElementById('slide3').style.display=(id==3)?'block':'none';
    document.getElementById('slide4').style.display=(id==4)?'block':'none';
    document.getElementById('switch1').style.fontWeight=(id==1)?'bold':'normal';
    document.getElementById('switch2').style.fontWeight=(id==2)?'bold':'normal';
    document.getElementById('switch3').style.fontWeight=(id==3)?'bold':'normal';
    document.getElementById('switch4').style.fontWeight=(id==4)?'bold':'normal';
}
</script>

<ul id="switches">
  <li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;">First slide</li>
  <li id="switch2" onmouseover="switchTo(2);">Second slide</li>
  <li id="switch3" onmouseover="switchTo(3);">Third slide</li>
  <li id="switch4" onmouseover="switchTo(4);">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>

بدلا من عرض جميع الشرائح عندما جس هو خارج (الذي من المرجح أن كسر تخطيط الصفحة) وأود أن وضع داخل التبديل ليس الحقيقي وصلات إلى رمز من جانب الخادم الذي يعود الصفحة مع فئة "النشطة" مسبقا على التبديل الصحيح /الانزلاق.

$(document).ready(function() {
  switches = $('#switches > li');
  slides = $('#slides > div');
  switches.each(function(idx) {
    $(this).data('slide', slides.eq(idx));
  }).hover(
    function() {
      switches.removeClass('active');
      slides.removeClass('active');
      $(this).addClass('active');
      $(this).data('slide').addClass('active');
    });
});
#switches .active {
  font-weight: bold;
}
#slides div {
  display: none;
}
#slides div.active {
  display: block;
}
<html>

<head>

  <title>test</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="switch.js"></script>

</head>

<body>

  <ul id="switches">
    <li class="active">First slide</li>
    <li>Second slide</li>
    <li>Third slide</li>
    <li>Fourth slide</li>
  </ul>
  <div id="slides">
    <div class="active">Well well.</div>
    <div>Oh no!</div>
    <div>You again?</div>
    <div>I'm gone!</div>
  </div>

</body>

</html>


وإليك إصدار مسج:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#switches li").mouseover(function () {
        var $this = $(this);
        $("#slides div").hide();
        $("#slide" + $this.attr("id").replace(/switch/, "")).show();
        $("#switches li").css("font-weight", "normal");
        $this.css("font-weight", "bold");
    });
});
</script>

<ul id="switches">
  <li id="switch1" style="font-weight:bold;">First slide</li>
  <li id="switch2">Second slide</li>
  <li id="switch3">Third slide</li>
  <li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(
  function(){
    $( '#switches li' ).mouseover(
      function(){
        $( "#slides div" ).hide();
        $( '#switches li' ).css( 'font-weight', 'normal' );
        $( this ).css( 'font-weight', 'bold' );
        $( '#slide' + $( this ).attr( 'id' ).replace( 'switch', '' ) ).show();
      }
    );
  }
);

</script>
</head>
<body>
<ul id="switches">
  <li id="switch1" style="font-weight:bold;">First slide</li>
  <li id="switch2">Second slide</li>
  <li id="switch3">Third slide</li>
  <li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>
</body>
</html>




css