Link Place Plugin

ケース2『該当オブジェクトのcssクラスを別のcssクラスに置き換える』

解説ページに戻る---index.html ケース1『該当オブジェクトにcssクラスを追加』 ケース2『該当オブジェクトのcssクラスを別のcssクラスに置き換える』 ケース3『戻り値を利用して上位オブジェクトを操作する』

記述したjavascript

<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Js/jquery.IW3_Link_PlaceCss.js"></script>
<script type="text/javascript">
		$(function($){
			$( document.links ).IW3_Link_PlaceCss( { rCLASS : 'mark', aCLASS : 'mark2' } );
		});
</script>

記述したcss

<style type="text/css">
	.mark{
		font-weight: bold;
		font-size: 16px;
		line-height: 30px;
		display: block;
		width: 550px;
		margin: 0px;
		background-color: #CCC;
		border: 1px solid #333;
		background-image: url(img/M1.gif);
		background-repeat: no-repeat;
		background-position: 5px center;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 30px;
	}
	.mark2{
		font-weight: bold;
		font-size: 16px;
		line-height: 30px;
		display: block;
		width: 550px;
		margin: 0px;
		background-color: #CCC;
		border: 1px solid #333;
		background-image: url(img/M2.gif);
		background-repeat: no-repeat;
		background-position: 5px center;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 30px;
	}
</style>

記述したHTMLのLinkソース

<a href="index.html" class="mark">解説ページに戻る---index.html</a>
<a href="dami1.html" class="mark">ケース1『該当オブジェクトにcssクラスを追加』</a>
<a href="dami2.html" class="mark">ケース2『該当オブジェクトのcssクラスを別のcssクラスに置き換える』</a>
<a href="dami3.html" class="mark">ケース3『戻り値を利用して上位オブジェクトを操作する』</a>