웹 사이트의 색상 표를 변경하는 스위치 만들기

웹 사이트에서 색상 테마/색상/색상 팔레트를 직접 변경하는 스위치/단추/링크를 만들려고합니다.웹 사이트의 색상 표를 변경하는 스위치 만들기

예를 들어 밤이되면 어두운 배경을 선호하거나 햇빛이 밝은 배경을 선호한다고 가정 해 봅시다. 그것은 대부분의 iPhone Apps에서 Dark Theme 및 White Theme와 비슷합니다. 대부분의 포르노 웹 사이트에는 "전환점"이 있기 때문에 사람들은 컴퓨터 화면에서 자신의 반성을 보지 못합니다. 잘 알 것입니다.

여기에 해결책이 있지만 배경색이 CSS에 이미 설정된 경우에는 작동하지 않습니다. 나는 모든 것을 시도했다. 여기

http://jsfiddle.net/Eqdfs/

내가 사용하고 코드입니다하지만 작동하지 않습니다 :

HTML

<body> 
<a id="btn1">black</a><br/> 
<a id="btn2">white</a><br/> 
<a id="btn3">grey</a> 
</body>

CSS

<style> 
/*SWITCH*/ 
body.black { 
background: #000000; 
} 

body.white { 
background: #ffffff; 
} 

body.gray { 
background: #C0C0C0; 
} 
</style>

자바 스크립트

<script> 
$("#btn1").click(function() { 
$('body').removeClass(); 
$('body').addClass('black'); 
}); 

$("#btn2").click(function() { 
$('body').removeClass(); 
$('body').addClass('white'); 
}); 

$("#btn3").click(function() { 
$('body').removeClass(); 
$('body').addClass('gray'); 
}); 
</script>

저는 JavaScript 및 jQuery를 처음 사용하므로 조금만 설명해주세요.

감사합니다. http://i.imgur.com/Dj1as35.png

편집 :

여기에 더 도움을 무슨 일이 일어나고 있는지의 스크린 샷이다 나는 해결책을 찾아 냈다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

출처

2014-07-17 Goldenoir

포스트 코드 그래서 우리는 볼 수 있습니다. 그리고 jsFiddle-link에서 제공 한 코드를 사용하지 않는 이유는 무엇입니까? – simeg

나는 나를 위해 바이올린을 만들었습니다. 또한,'.class3' 배경 이미지 URL이 깨졌습니다. – DontVoteMeDown

예, jsfiddle 코드가 제대로 작동하는 것 같습니다. – DasBeasto

HTML :

<body> 
<a id="btn1">Noise BG</a><br/> 
<a id="btn2">RVB BG</a><br/> 
<a id="btn3">dunno BG</a> 
</body>

자바 스크립트 :

$("#btn1").click(function() { 
$('body').removeClass(); 
$('body').addClass('black'); 
}); 

$("#btn2").click(function() { 
$('body').removeClass(); 
$('body').addClass('white'); 
}); 

$("#btn3").click(function() { 
$('body').removeClass(); 
$('body').addClass('gray'); 
});

CSS :

작업을 위해, 나는 다음과 같이 헤드 태그에 jQuery를 1.7.2를로드 할 수 있었다

body.black { 
background: #000000; 
} 

body.white { 
background: #ffffff; 
} 

body.gray { 
background: #C0C0C0; 
}

출처

2014-07-17 17:37:43 MannfromReno

고마워, 이제 알았다. 그러나 그것은 효과가 없습니다. Tumblr 블로그에 게시하려고합니다. 그게 그 이유일까요? – Goldenoir

블로그에서 맞춤 HTML/CSS/자바 스크립트를 추가 할 수 있다면 제대로 작동 할 것입니다. 충분히 익숙하지 않습니다. 이 기사를 확인하십시오 : http://www.problogtricks.com/2013/12/add-custom-css-javascript-code-to-tumblr-blog.html – MannfromReno

예, 실제로는 Tumblr의 전체 요점입니다. HTML, CSS 및 JavaScript를 사용자 정의 할 수 있습니다. 내 원래 게시물에 사용하고있는 코드를 게시했습니다. 링크를 가져 주셔서 감사합니다. – Goldenoir

HTML :

,451,515,

<body> 
    <a id="btn1">Noise BG</a> 
    <a id="btn2">RVB BG</a> 
    <a id="btn3">dunno BG</a> 

    <ul id="switcher"> 
    <li id="grayButton"></li> 
    <li id="whiteButton"></li> 
    <li id="blueButton"></li> 
    <li id="yellowButton"></li> 
</ul> 

<h1>Color Scheme Switcher</h1> 

<p>Try clicking on one of the colors above to change the colors on this page!</p> 
</body>

CSS :

body { 
    background-repeat:repeat; 
    background-position:top-left; 
} 

body.class1 { 
    background-image:url('http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif'); 
    color:yellow; 
} 

body.class2 { 
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/e/ec/Pattern_square_16.png'); 
    color:red; 
} 

body.class3 { 
    background-image:url('http://www.herbactive.com.br/catalog/view/theme/default/image/pattern/pattern-11.png'); 
    color:blue; 
} 


a { 
    display:inline-block; 
    width:120px; 
    background:#ffffff; 
    cursor:pointer; 
    margin:2px 0; 
} 
body { 
    margin: 3em; 
    padding: 0; 
    font-family: sans-serif; 
    font-size: 18px; 
    line-height: 1.5; 
} 
body.gray { 
    background: gray; 
    color: white; 
} 
body.white { 
    background: white; 
    color: black; 
} 
body.blue { 
    background: blue; 
    color: white; 
} 
body.yellow { 
    background: yellow; 
    color: black; 
} 

h1 { 
    line-height: 1.25; 
    margin: 2em 0 0; 
} 
p { 
    margin: .5em 0; 
} 

#switcher { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 
#switcher li { 
    float: left; 
    width: 30px; 
    height: 30px; 
    margin: 0 15px 15px 0; 
    border-radius: 30px; 
    border: 3px solid black; 
} 

#grayButton { 
    background: gray; 
} 
#whiteButton { 
    background: white; 
} 
#blueButton { 
    background: blue; 
} 
#yellowButton { 
    background: yellow; 
}

JS :

$("#btn1").click(function() { 
$('body').removeClass(); 
$('body').addClass('class1'); 
}); 

$("#btn2").click(function() { 
$('body').removeClass(); 
$('body').addClass('class2'); 
}); 

$("#btn3").click(function() { 
$('body').removeClass(); 
$('body').addClass('class3'); 
}); 
$('#grayButton').click(switchGray); 
$('#whiteButton').click(switchWhite); 
$('#blueButton').click(switchBlue); 
$('#yellowButton').click(switchYellow); 

function switchGray() { 
    $('body').attr('class', 'gray'); 
} 

function switchWhite() { 
    $('body').attr('class', 'white'); 
} 

function switchBlue() { 
    $('body').attr('class', 'blue'); 
} 

function switchYellow() { 
    $('body').attr('class', 'yellow'); 
}

출처

2017-05-22 09:07:05 Jitendra

해답을 설명해주세요. – lalithkumar

웹 사이트의 색상 표를 변경하는 스위치 만들기

답변

관련 문제