Изменение цвета фона div на основе его идентификатора

Использование страницы Скотта Роббина: http://srobbin.com/jquery-plugins/pageslide/ Я пытаюсь сделать слайды «больше информации», которые будут покрывать весь экран справа налево.Изменение цвета фона div на основе его идентификатора

Я получаю полноэкранные слайды, как я хотел, но я хотел бы иметь возможность определять цвет фона каждого слайда. Это устанавливается в #pageslide CSS, который является общим для каждого слайда.

HTML:

<head> 
<style> 

    body { 
     background: #f4f4f4; 
     font: 14px/18px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 
     color: #666; 
     -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ 
     -webkit-text-size-adjust: none; 
    } 

    a, a:visited { color: #C30; text-decoration: none; border-bottom: 1px dotted #C30; } 
    a:hover { color: #900; border-bottom-style: solid; } 

    p { margin-bottom: 20px; } 

    #content { 
     width: 940px; 
     padding: 10px; 
     margin: 0 auto; 
    } 
     #content h1 { color: #333; line-height: 1em; } 
     #content ul { padding-left: 0; list-style: none; } 
      #content ul li { margin-bottom: 20px; } 

    .slide { display: none; } 
     .slide a { background: #CCC; color: #333; font-weight: bold; padding: 5px 10px; border: none; } 
     .slide a:hover { background: #aaa; } 

    pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px 20px; } 

    #pageslide { 
    /* These styles MUST be included. Do not change. */ 
    display: none; 
    position: absolute; 
    position: fixed; 
    top: 0; 
    height: 100%; 
    z-index: 999999; 

    /* Specify the width of your pageslide here */ 
    width: 100%; 
    padding: 10px; 

    /* These styles are optional, and describe how the pageslide will look */ 
    background-color: #a90000; 
    color: #FFF; 
    } 


</style> 
</head> 
<body> 
<div id="content"> 
    <h1>PageSlide Demo</h1> 
    <p>Below are a couple of pageslides:</p> 
    <ul> 
     <li> 
      <a href="#modal1" class="slideleft">First Slide. Red Background.</a> 
     </li> 
     <li> 
      <a href="#modal2" class="slideleft">Second Slide. Blue Background.</a> 
     </li> 
     <li> 
      <a href="#modal3" class="slideleft">Third Slide. Green Background.</a>    
     </li> 

    </ul> 
    <div id="modal1" class="slide" style="width:800px; padding:20px; "> 
     <h2>Slide 1</h2> 
     <p>This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call <code>$.pageslide.close()</code>.</p> 
     <p><a href="javascript:$.pageslide.close()">Close</a></p> 
    </div> 

    <div id="modal2" class="slide" style="width:800px; padding:20px; "> 
     <h2>Slide 2</h2> 
     <p>This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call <code>$.pageslide.close()</code>.</p> 
     <p><a href="javascript:$.pageslide.close()">Close</a></p> 
    </div> 

    <div id="modal3" class="slide" style="width:800px; padding:20px; "> 
     <h2>Slide 3</h2> 
     <p>This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call <code>$.pageslide.close()</code>.</p> 
     <p><a href="javascript:$.pageslide.close()">Close</a></p> 
    </div> 

</div> 
<script src="jquery-1.7.1.min.js"></script> 
<script src="jquery.pageslide.min.js"></script> 
<script> 
    /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */ 
    $(".slideleft").pageslide({ direction: "left", modal: true });   
</script> 
</body> 
</html>

JS:

/* 
* jQuery pageSlide 
* Version 2.0 
* http://srobbin.com/jquery-pageslide/ 
* 
* jQuery Javascript plugin which slides a webpage over to reveal an additional interaction pane. 
* 
* Copyright (c) 2011 Scott Robbin (srobbin.com) 
* Dual licensed under the MIT and GPL licenses. 
*/ 

; 
(function (b) { 
    function j(e, a) { 
     if (0 === e.indexOf("#")) b(e).clone(!0).appendTo(c.empty()).show(); 
     else { 
      if (a) { 
       var d = b("<iframe />").attr({ 
        src: e, 
        frameborder: 0, 
        hspace: 0 
       }).css({ 
        width: "100%", 
        height: "100%" 
       }); 
       c.html(d) 
      } else c.load(e); 
      c.data("localEl", !1) 
     } 
    } 

    function k(b, a) { 
     var d = c.outerWidth(!0), 
      f = {}, g = {}; 
     if (!c.is(":visible") && !h) { 
      h = !0; 
      switch (b) { 
      case "left": 
       c.css({ 
        left: "auto", 
        right: "-" + d + "px" 
       }); 
       f["margin-left"] = "-=" + d; 
       g.right = "+=" + d; 
       break; 
      default: 
       c.css({ 
        left: "-" + d + "px", 
        right: "auto" 
       }), f["margin-left"] = "+=" + d, g.left = "+=" + d 
      } 
      l.animate(f, a); 
      c.show().animate(g, a, function() { 
       h = !1 
      }) 
     } 
    } 
    var l = b("body"), 
     c = b("#pageslide"), 
     h = !1, 
     m; 
    0 == c.length && (c = b("<div />").attr("id", "pageslide").css("display", "none").appendTo(b("body"))); 
    b.fn.pageslide = function (e) { 
     this.click(function (a) { 
      var d = b(this), 
       f = b.extend({ 
        href: d.attr("href") 
       }, e); 
      a.preventDefault(); 
      a.stopPropagation(); 
      c.is(":visible") && d[0] == m ? b.pageslide.close() : (b.pageslide(f), m = d[0]) 
      $('body').css('overflow-y','hidden'); 
     }) 
    }; 
    b.fn.pageslide.defaults = { 
     speed: 500, 
     direction: "right", 
     modal: !1, 
     iframe: !0, 
     href: null 
    }; 
    b.pageslide = function (e) { 
     var a = b.extend({}, b.fn.pageslide.defaults, e); 
     c.is(":visible") && c.data("direction") != a.direction ? b.pageslide.close(function() { 
      j(a.href, a.iframe); 
      k(a.direction, a.speed) 
     }) : (j(a.href, a.iframe), c.is(":hidden") && k(a.direction, a.speed)); 
     c.data(a) 
    }; 
    b.pageslide.close = function (c) { 
     var a = b("#pageslide"), 
      d = a.outerWidth(!0), 
      f = a.data("speed"), 
      g = {}, i = {}; 
     if (!a.is(":hidden") && !h) { 
      h = !0; 
      switch (a.data("direction")) { 
      case "left": 
       g["margin-left"] = "+=" + d; 
       i.right = "-=" + d; 
       break; 
      default: 
       g["margin-left"] = "-=" + d, i.left = "-=" + d 
      } 
      a.animate(i, f); 
      l.animate(g, f, function() { 
       a.hide(); 
       h = !1; 
       "undefined" != typeof c && c() 
      }) 
      $('body').css('overflow-y','scroll'); 
     } 
    }; 
    c.click(function (b) { 
     b.stopPropagation() 
    }); 
    b(document).bind("click keyup", function (e) { 
     "keyup" == e.type && 27 != e.keyCode || c.is(":visible") && !c.data("modal") && b.pageslide.close() 
    }) 
})(jQuery);

Есть ли способ, чтобы установить цвет фона, основанный на сОн идентификаторе (modal1, modal2, modal3)?

Большое спасибо

источник

2013-10-25 Edward

Чтобы изменить цвет фона на конкретном теге DIV, просто используйте;

background-color:#000000;

Это будет слишком черным, например.

источник

2013-10-25 00:29:04 Luke14

Я хотел бы использовать JQuery

$('#YourDivid').css("background-color","black");

, если вы хотели бы изменить больше возможностей, чем просто цвет фона, то вы могли бы сделать это

$('#YpurDivId').css({ 
    "background-color": "black", 
    "border": "none" 
});

источник

2013-10-25 01:07:16 swsa

Спасибо за ваш ответ. Я пробовал это, но проблема в том, что фон для слайдов определяется #pageslide, который является общим для 3 слайдов. Как заставить его динамически меняться в зависимости от его содержимого, которое может быть div # modal1, # modal2 или # modal3? – Edward

Я попытался добавить следующую функцию: 'function bclick (color) { $ ('# pageslide'). Css (« background-color »,« color »); } 'и следующий вызов:'

Second Slide. Blue Background.

'но это не работает. – Edward

Вы пробовали это: 'bclick (color) {$ ('# pageslide'). Css (« background-color », color); } '? – Fernando

Изменение цвета фона div на основе его идентификатора

ответ

Смежные вопросы