Жылдам және оңай jquery li/div өзгерту

just wondering if someone can help me make this code work properly and be used for multipul li's without declaring each one separately. Is this possible? Basically want to do an background image rollover with the < li > then when hovering over the < li > have a the contents of #show change. Does that make sense? Any clues of help would be much appreciated.

Қазіргі уақытта код:

JQUERY:

function switchTo(i) {
  $('#menu li').css({background:"url(images/1.png) no-repeat top left"}).eq(i).css({background:"url(images/1.png) no-repeat bottom left"});
  $('#show div').css('display','none').eq(i).css('display','block');
  $('#menu li').css({background:"url(images/2.png) no-repeat top left"}).eq(i).css({background:"url(images/2.png) no-repeat bottom left"});
  $('#show div').css('display','none').eq(i).css('display','block');
  $('#menu li').css({background:"url(images/3.png) no-repeat top left"}).eq(i).css({background:"url(images/3.png) no-repeat bottom left"});
  $('#show div').css('display','none').eq(i).css('display','block');
  $('#menu li').css({background:"url(images/4.png) no-repeat top left"}).eq(i).css({background:"url(images/4.png) no-repeat bottom left"});
  $('#show div').css('display','none').eq(i).css('display','block');
}
$(document).ready(function(){
  $('#menu li').mouseover(function(event){
    switchTo($('#menu li').index(event.target));
  });
  switchTo(0);
});

HTML:


<div id="show">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Тағы да рахмет.

1

2 жауаптар

CSS-тің : hover сыныбын имитациялауға тырысқан сияқтысыз:

#menu li.one:hover {
    background: url(images/1.png) no-repeat top left;
}

/* etc. */

HTML битіңізді өзгертіп, сәйкес келетін бөлгіш битпен мазмұнды көрсетуге келетін болсақ:


Қосымша CSS қосу:

#menu li div {
   display: none;
}    

#menu li:hover div {
   display: block;
}

Working example here

1
қосылды
Егер сіз div-тың әрқашан #menu li -нің сол жағына 200 пиксель болуын қаласаңыз, онда бұл тамаша тәжірибе.
қосылды автор Joey, көзі
Мен нені білдіретінімді түсінемін. Ли-лердің үстіне өту кезінде нөмірлер әрқашан бірдей күйде көрсетілсін дегіңіз келеді ме?
қосылды автор Joey, көзі
Мына әрекетті орындаңыз: jsfiddle.net/yL4hx/21
қосылды автор Joey, көзі
Мен CSS-ді ғана қолдана отырып, оны жасауға болар едім деп сенемін. Түрлі беттерде <div style = «display: block;»> 1
секілді жолды жазуға болады. Кірістірілген CSS стиль кестелерін алдын ала анықтайды. Мен сіздердің сұрақтарыңызға жауап бере аламын!
қосылды автор Joey, көзі
Сіз аңызға айналғансыз. Бұл дивизиттердің жақсы тәжірибесін есепке алу үшін сол маржаны пайдалану керек пе? Мысал: jsfiddle.net/yL4hx/1
қосылды автор Bennjamin_, көзі
Жылжыту әсерінің төмен түсіп кетуінен және нөмірлерді сол күйде жағына қалай көрсетесіз? jsfiddle.net/yL4hx/19
қосылды автор Bennjamin_, көзі
Иә. Мысалы, сандарды кескінмен ауыстырамын деп айтыңыз. Мен бір ғана суретті тиісті li үшін көрсету керек. Бұл мағынасы бар ма? Менің ойымша, барлық div'лерді бір-бірінің үстіне орналастыра аласыз ба, әлде сандардың әрқайсысында пайда болатын бір дивияны қолдануға болады ма?
қосылды автор Bennjamin_, көзі
Көп рақмет сізге! Соңында, CSS-ні ​​қолданып, бетті біреудің таңдалғанымен және div көрсетіліп қойған кезде қолданасыз ба? Содан кейін, сіз қозғалысқа шыққанда тоқтаған соң, сіз таңдаған жерге қойылған соңғы жолды сақтайды. Мүмкін, бұл jQuery арқылы екенін білемін ... Тағы да рахмет!
қосылды автор Bennjamin_, көзі

Мен мұнда JavaScript қажет деп ойламаймын, біршама үстемдік көрінеді.

Неліктен лиге бармайсыз? Hover және CSS-де бәрін жасайсыз? Сіз жай ғана background-image аласыз: ... в: hover класында және бұл өте көп. Divs үшін бірдей.

0
қосылды
Барлық CSS шынымен жақсы болар еді! <div> <div> <div> <div> <div> <div> <div> дегенді білдіреді
қосылды автор Bennjamin_, көзі