.hasClass,.addClass(),.removeClassで用途色々スイッチ

トグルではなく、jqueryでclassを加えたり、外したり。
見た目はCSSでやるため用途はいろいろあります。

初歩的ですがシンプルにしました。(自分用に)

Jquery

$(function() {
$('.btn').click(function(){
if($('#area').hasClass('bold')){
	$('#area').removeClass('bold');
} else {
	$('#area').addClass('bold');
}
});
});

CSS


.bold span{
	background: -webkit-linear-gradient(transparent 60%, #ff1493 60%)!important;
	background: -o-linear-gradient(transparent 60%, #ff1493 60%)!important;
	background: linear-gradient(transparent 60%, #ff1493 60%)!important;
	font-weight:bold;
}

HTML

<button class="btn">PUSH</button>
<section id="area">jqueryの<span>addClass(),removeClass(),hasClass()</span>を使用した切替スイッチ。見た目はCSSで制御するため用途は色々。</section>

サンプル

http://promenade.in/run/adclass.html

CSS切り替えスイッチ WebStorage保存

Javascript&CSS

初期設定のCSSを作っておきます。

<link id="setcss" type="text/css" rel="stylesheet" href="css/default.css" />

切替のJSも読み込み

<script type="text/javascript" src="setcss.js"></script>

その読み込むJS


function setcss()
{
var csskey = Number(localStorage.getItem("csstemp"));

switch (csskey){
  case 1:
var style = '<link rel="stylesheet" href="css/default.css">';
    $('head link:last').after(style);
    break;
  case 2:
var style = '<link rel="stylesheet" href="css/change.css">';
    $('head link:last').after(style);
    break;
}
}
function cssswitch()
{
document.getElementById('horizon').onclick = function(){
localStorage.setItem("csstemp" , 1);	
var csskey = localStorage.getItem("csstemp");
if(csskey==1){
var style = '<link rel="stylesheet" href="css/default.css">';
    $('head link:last').after(style);
	}
	else 
var style = '<link rel="stylesheet" href="css/default.css">';
    $('head link:last').after(style);
		
		
	}

document.getElementById('vertical').onclick = function(){
localStorage.setItem("csstemp" , 2);
var csskey = localStorage.getItem("csstemp");

if(csskey==2){
var style = '<link rel="stylesheet" href="css/change.css">';
    $('head link:last').after(style);
	}
	else 
var style = '<link rel="stylesheet" href="css/default.css">';
    $('head link:last').after(style);
	}
}

jquery読み込みで。

<script type="text/javascript">
$(function(){
document.ready=function() {
setcss();
};
cssswitch();
});
</script>

HTML

<table>
		<tr>
				<td><button id="horizon">button</button></td>
				<td><button id="vertical">button</button></td>
		</tr>
</table>

<div class="list-area">
		<div class="list-left">画像など</div>
		<div class="list-right">
				<p>タイトル</p>
				<p>項目1</p>
				<p>項目2</p>
				<p>項目3</p>
		</div>
		<br class="clear" />
</div>
<div class="list-area">
		<div class="list-left">画像など</div>
		<div class="list-right">
				<p>タイトル</p>
				<p>項目1</p>
				<p>項目2</p>
				<p>項目3</p>
		</div>
		<br class="clear" />
</div>