jQuery Konfiguration

Hier ein paar Beispiele.

$(document).ready(function(){
  $("#accordion").accordion({
    collapsible:!0,
    active:0,
    event:"click",
    heightStyle:"content",
    animate: {duration:"2000",easing:"swing"}
  })
});  
$(document).ready(function () {
  $(".liste_inhalt:visible").hide();
  $(".liste_titel").mouseover(function () {
    $(".liste_inhalt").show();
  });
  
  $(".liste_fuss").click(function () {
    $(".liste_inhalt:visible").hide();
  });
});
$(document).ready(function () {
  $(".div_neu_content:visible").hide();
  
  $(".div_neu_div").mouseover(function () {
    $(".div_neu_content:visible").hide();
    $(this).next("div").slideToggle(200);
  });
  
  $(".div_neu_titel").mouseleave(function () {
    $(".div_neu_content:visible").hide(200);
  }); 
});

Wenn man nicht einzelne CSS Attribute bearbeiten will, kann man auch Styles zuweisen bzw. entfernen

$(document).ready(function () {
  $(".div_tab_titel").mouseover(function () {
    $(".div_tab_titel").removeClass('div_tab_titel_hover'); 
    $(this).addClass('div_tab_titel_hover'); 
  });  
});  

In diesem Fall werden einzelne CSS Attribute geändert.

$(document).ready(function () {
  $("#content").slideToggle(1);
  
  ## Titel beim MouseOver formatieren
  ## Einzelne Style Attribute überschreiben
  $(".div_tab_titel").mouseover(function () {
    $(".div_tab_titel").css('background-color', '#2d80a8');
    $(".div_tab_titel").css('border-bottom-color', '#2d80a8');
    $(".div_tab_titel").css('color', '#ffffff');
    $(this).css('background-color', '#efefe7');
    $(this).css('color', '#2d80a8');
    $(this).css('border-bottom-color', '#efefe7');
  });
      
  ## Inhalte der Tabs bei MouseOver anzeigen
  $("#tab[dang='0']").mouseover(function() {
    $(".div_tab_content:visible").hide();
    $("#content[dings='0']").slideToggle(1);
  });
  $("#tab[dang='1']").mouseover(function() {
    $(".div_tab_content:visible").hide();
    $("#content[dings='1']").slideToggle(1);
  });
  $("#tab[dang='2']").mouseover(function() {
    $(".div_tab_content:visible").hide();
    $("#content[dings='2']").slideToggle(1);
  });
  $("#tab[dang='3']").mouseover(function() {
    $(".div_tab_content:visible").hide();
    $("#content[dings='3']").slideToggle(1);
  });
});
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • jquery_konfiguration.txt
  • Zuletzt geändert: 24/09/2018 13:33
  • von Thomas Berscheid