[Help] Thay background cho class[✔]

[BTV2]

Như tiêu đề mình có 1 khung có class là body_2 với background là #000 và 3 nút chọn có 3 id lần lượt là color_1, color_2, color_3 và cả 3 đều có background khác nhau.
Mình muốn 1 js thay đổi background của class body_2 khi click vào 1 trong 3 nút, sẽ thay thành màu tương ứng.
Và 1 js lưu cookie khi đã chọn màu.
Demo cần làm: http://forum-test123.forumvi.com/h3-page

[anhdausai]

http://devs.forumvi.com/t1028-hoi-ap-xin-code-thay-oi-background-nhu-cua-devs tham khảo topic này mình thấy nó tương tự

[subin217]

Nhưng bài viết đó tớ đã hỏi và anh baivong trả lời là "Code này mình viết riêng theo skin nên bạn sẽ không dùng được (nếu không có skin này)." Vậy thì theo tớ thì tớ thấy dùng CSS là hợp lý nhất. Ở W3 School có loại CSS như thế nhưng mạng lag quá tớ kiếm không được bạn vào

Code:

http://www.w3schools.com/css/

kiếm cái CSS Color hay Background v..v... nhé

[anhdausai]

Làm nút chọn màu theo class dùng css thì làm làm sao được?
Ý anh Bại Vong là mid chọn màu devs đang dùng anh ấy thiết kế riêng cho skin devs nên nó ko có tác dụng với skin khác và anh ấy có hướng dẫn cách sử js đổi màu áp dụng vs 1 class riêng biệt bạn chịu khó đọc kỹ hướng dẫn và vọc
http://devs.forumvi.com/t1028-hoi-ap-xin-code-thay-oi-background-nhu-cua-devs#6694

[markai30]

Lưu ý rằng code này chỉ hoạt động bằng thư viện jquery và có sẵn hàm cookie. Nếu bạn dùng riêng một trang html bạn phải thêm vào thư viện jquery và hàm cookie này.

Code:


function my_getcookie(name) {
   cname = name + '=';
   cpos = document.cookie.indexOf(cname);
   if (cpos != -1) {
      cstart = cpos + cname.length;
      cend = document.cookie.indexOf(";", cstart);
      if (cend == -1) {
         cend = document.cookie.length
      }
      return unescape(document.cookie.substring(cstart, cend))
   }
   return null
}
function my_setcookie(name, value, sticky, path) {
   expires = "";
   domain = "";
   if (sticky) {
      expires = "; expires=Wed, 1 Jan 2020 00:00:00 GMT"
   }
   if (!path) {
      path = "/"
   }
   document.cookie = name + "=" + value + "; path=" + path + expires + domain + ';'
}


Code này mình viết bằng class cho dễ làm. Cái trang html bạn đưa sửa lại đôi chút như sau:

html:

Code:


<div style="width:970px;margin:auto;text-align: center;">
  <div style="background:#c0392b;" class="changecolor c0392b">Color 1</div>
  <div style="background:#8e44ad;" class="changecolor 8e44ad">Color 2</div>
  <div style="background:#16a085;" class="changecolor 16a085">Color 3</div>
</div>


Thêm css này vào

Code:


body.c0392b .body_2 {
background-color: c0392b
}
/* màu 2 */
body.8e44ad .body_2 {
background-color: 8e44ad
}
/* màu 3 */
body.16a085 .body_2 {
background-color: 16a085
}


Và cuối cùng là dùng js này:

Code:


// Lấy giá trị cookie và thêm class vào body
if(my_getcookie("color") != null){
 $('body').addClass(''+my_getcookie("color")+'');
}
// Click đổi màu và lưu vào cookie vĩnh viễn.
$('.changecolor').click(function(){
 var a = $(this).attr('class').split(' ');
 $('body').removeClass().toggleClass(''+a[1]+'');
 my_setcookie("color", ''+a[1]+'', true);
});


[BTV2]

#markai30
Ko dùng dc, cậu xem coi mình làm sai cái gì?
Demo: http://forum-test123.forumvi.com/h3-page
HTML:

Code:

<script>
function my_getcookie(name) {
  cname = name + '=';
  cpos = document.cookie.indexOf(cname);
  if (cpos != -1) {
      cstart = cpos + cname.length;
      cend = document.cookie.indexOf(";", cstart);
      if (cend == -1) {
        cend = document.cookie.length
      }
      return unescape(document.cookie.substring(cstart, cend))
  }
  return null
}
function my_setcookie(name, value, sticky, path) {
  expires = "";
  domain = "";
  if (sticky) {
      expires = "; expires=Wed, 1 Jan 2020 00:00:00 GMT"
  }
  if (!path) {
      path = "/"
  }
  document.cookie = name + "=" + value + "; path=" + path + expires + domain + ';'
} 
  </script>
<style>
  .changecolor {
height: 16px;
cursor: pointer;
margin: 10px;
text-align: center;
padding: 7px;
display: inline-block;
border-radius: 3px;
  color: #fff;
}
  #color_2 {
height: 16px;
cursor: pointer;
margin: 10px;
text-align: center;
padding: 7px;
display: inline-block;
border-radius: 3px;
  color: #fff;
}
  #color_3 {
height: 16px;
cursor: pointer;
margin: 10px;
text-align: center;
padding: 7px;
display: inline-block;
border-radius: 3px;
  color: #fff;
}
 .body_2 {
height: 250px;
width: 970px;
margin: auto;
}
 
body.c0392b .body_2 {
background-color: c0392b
}
/* màu 2 */
body.8e44ad .body_2 {
background-color: 8e44ad
}
/* màu 3 */
body.16a085 .body_2 {
background-color: 16a085
}
</style>

<div style="width:970px;margin:auto;text-align: center;">
  <div style="background:#c0392b;" class="changecolor c0392b">Color 1</div>
  <div style="background:#8e44ad;" class="changecolor 8e44ad">Color 2</div>
  <div style="background:#16a085;" class="changecolor 16a085">Color 3</div>
</div>
<div class="body_2">
</div>


<script>
// Lấy giá trị cookie và thêm class vào body
if(my_getcookie("color") != null){
 $('body').addClass(''+my_getcookie("color")+'');
}
// Click đổi màu và lưu vào cookie vĩnh viễn.
$('.changecolor').click(function(){
 var a = $(this).attr('class').split(' ');
 $('body').removeClass().toggleClass(''+a[1]+'');
 my_setcookie("color", ''+a[1]+'', true);
});
  </script>

[subin217]

Bác có bật Java Script chưa

[markai30]

#markai30
Ko dùng dc, cậu xem coi mình làm sai cái gì?
Demo: http://forum-test123.forumvi.com/h3-page
HTML:

Code:

<script>
function my_getcookie(name) {
   cname = name + '=';
   cpos = document.cookie.indexOf(cname);
   if (cpos != -1) {
      cstart = cpos + cname.length;
      cend = document.cookie.indexOf(";", cstart);
      if (cend == -1) {
         cend = document.cookie.length
      }
      return unescape(document.cookie.substring(cstart, cend))
   }
   return null
}
function my_setcookie(name, value, sticky, path) {
   expires = "";
   domain = "";
   if (sticky) {
      expires = "; expires=Wed, 1 Jan 2020 00:00:00 GMT"
   }
   if (!path) {
      path = "/"
   }
   document.cookie = name + "=" + value + "; path=" + path + expires + domain + ';'
}  
  </script>
<style>
  .changecolor {
height: 16px;
cursor: pointer;
margin: 10px;
text-align: center;
padding: 7px;
display: inline-block;
border-radius: 3px;
  color: #fff;
}
  #color_2 {
height: 16px;
cursor: pointer;
margin: 10px;
text-align: center;
padding: 7px;
display: inline-block;
border-radius: 3px;
  color: #fff;
}
  #color_3 {
height: 16px;
cursor: pointer;
margin: 10px;
text-align: center;
padding: 7px;
display: inline-block;
border-radius: 3px;
  color: #fff;
}
 .body_2 {
height: 250px;
width: 970px;
margin: auto;
}
  
body.c0392b .body_2 {
background-color: c0392b
}
/* màu 2 */
body.8e44ad .body_2 {
background-color: 8e44ad
}
/* màu 3 */
body.16a085 .body_2 {
background-color: 16a085
}
</style>

<div style="width:970px;margin:auto;text-align: center;">
  <div style="background:#c0392b;" class="changecolor c0392b">Color 1</div>
  <div style="background:#8e44ad;" class="changecolor 8e44ad">Color 2</div>
  <div style="background:#16a085;" class="changecolor 16a085">Color 3</div>
</div>
<div class="body_2">
</div>


<script>
// Lấy giá trị cookie và thêm class vào body
if(my_getcookie("color") != null){
 $('body').addClass(''+my_getcookie("color")+'');
}
// Click đổi màu và lưu vào cookie vĩnh viễn.
$('.changecolor').click(function(){
 var a = $(this).attr('class').split(' ');
 $('body').removeClass().toggleClass(''+a[1]+'');
 my_setcookie("color", ''+a[1]+'', true);
});
  </script>

Mình quên dấu # bạn sửa css lại

Code:

body.c0392b .body_2 {
background-color: #c0392b
}
/* màu 2 */
body.8e44ad .body_2 {
background-color: #8e44ad
}
/* màu 3 */
body.16a085 .body_2 {
background-color: #16a085
}

Mà tốt nhất bạn nên sửa mã màu lại là thích hợp nhất. ví dụ màu đen #000 bạn sửa lại là black.

Sửa mã màu cái js luôn. Nên chọn mã màu là chữ để khỏi bị lỗi nhé.

Dùng devs tool test mã màu nhé.

[BTV2]

Thank mạnh

[BTV2]

@markai30
Tình hình là dùng dc trong HTML nhưng đem vào overall_header thì ko dùng dc, cậu xem giúp mình phát
Demo: http://forum-test123.forumvi.com/
Pass không đổi

[markai30]

@markai30
Tình hình là dùng dc trong HTML nhưng đem vào overall_header thì ko dùng dc, cậu xem giúp mình phát
Demo: http://forum-test123.forumvi.com/
Pass không đổi

Vào đọc tin nhắn nhé.
Cái này tại thằng fm ko phải tại mình. Đã hướng dẫn lại trong phần tin nhắn.

[BTV2]

Thank phát nữa

[subin217]

Không liên quan nhưng bác @markai30 chỉ cháu với

[markai30]

Không liên quan nhưng bác @markai30 chỉ cháu với

làm theo demo sẵn có của BTV là được rồi.
http://forum-test123.forumvi.com/

[Sponsored content]