他のメディアなどを参照しながら、似たようなたくさんの文章が並んだ画面に目を戻すと、どこまで見たのか分からなくなることがあります。そんなとき、部分的にスタイルを変えておくことができれば、迷うことは少なくなります。

サンプルは、既読部分(li要素)をクリックすると、その要素の文字色と背景色を他とは違うスタイルに変更します。もう一度クリックすると元に戻ります。また、「すべて元に戻す」ボタンクリックで、ロードした状態に戻せます。

簡単なscriptと変更用のスタイルだけで設置できるので、規約などの文字が長々と続くページでは、予め用意しておくのもありかと思います。。

サンプル

  1. サンプル文章001-サンプル文章001-サンプル文章001-サンプル文章001-サンプル文章001-サンプル文章001
  2. サンプル文章002-サンプル文章002-サンプル文章002-サンプル文章002-サンプル文章002-サンプル文章002
  3. サンプル文章003-サンプル文章003-サンプル文章003-サンプル文章003-サンプル文章003-サンプル文章003
  4. サンプル文章004-サンプル文章004-サンプル文章004-サンプル文章004-サンプル文章004-サンプル文章004
  5. サンプル文章005-サンプル文章005-サンプル文章005-サンプル文章005-サンプル文章005-サンプル文章005
  6. サンプル文章006-サンプル文章006-サンプル文章006-サンプル文章006-サンプル文章006-サンプル文章006
  7. サンプル文章007-サンプル文章007-サンプル文章007-サンプル文章007-サンプル文章007-サンプル文章007
  8. サンプル文章008-サンプル文章008-サンプル文章008-サンプル文章008-サンプル文章008-サンプル文章008
  9. サンプル文章009-サンプル文章009-サンプル文章009-サンプル文章009-サンプル文章009-サンプル文章009
  10. サンプル文章010-サンプル文章010-サンプル文章010-サンプル文章010-サンプル文章010-サンプル文章010
  11. サンプル文章011-サンプル文章011-サンプル文章011-サンプル文章011-サンプル文章011-サンプル文章011
  12. サンプル文章012-サンプル文章012-サンプル文章012-サンプル文章012-サンプル文章012-サンプル文章012

サンプルのhtmlソース

<div id="toggleAppear">
  <ol>
    <li>サンプル文章001-サンプル文章001-サンプル文章001-サンプル文章001-サンプル文章001-サンプル文章001</li>
    /* ---中略--- */
    <li>サンプル文章012-サンプル文章012-サンプル文章012-サンプル文章012-サンプル文章012-サンプル文章012</li>
  </ol>
</div>

サンプルのCSSソース

#toggleAppear li {
	padding: 0;
	text-align: left;
	list-style-type: decimal;
	color: #222;
	background: #fff;
	}
#toggleAppear li.obs {
	color: #aaa;
	background: #cee;
	}

サンプルのscript

$(function(){
	$('#toggleAppear li').on('click', function() {
		$(this).toggleClass('obs');
	});
	$('#btn').on('click', function() {
		$('#toggleAppear li').removeClass('obs');
	});
});
戻るボタン