jquery样式选择功能

最新推荐文章于 2023-09-07 17:40:47 发布

Longerandlonger

最新推荐文章于 2023-09-07 17:40:47 发布

阅读量3.3k

点赞数

分类专栏： html jquery javascript

本文链接：https://blog.csdn.net/Longerandlonger/article/details/8518280

版权

html 同时被 3 个专栏收录

6 篇文章

订阅专栏

jquery

5 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

<!DOCUMENT html>
<html>
<head>
	<meta charset="utf-8" />
	<style type="text/css">
		.share-limit {
			width:400px;
			border:solid 3px;
		}
		.switcher {
			float:left;
			border-bottom:none;
			display:block;
			background-color:#eee
		}
		#switcher-default {
			
		}
		#switcher-narrow {
			
		}
		#switcher-larger {
			
		}
		#container {
			
		}
		#content {
			margin:20px;
			margin-top:0px;
			border:solid 1px;
			border:10px;
			//white-space:pre-wrap;
			text-indent:2em;
			line-height:1.8em;
		}
		.btn-ul {
			list-style:none;
			text-align:center;
			overflow:hidden;
			white-space:nowrap;
		}
		.btn-ul li {
			list-style:none;
			float:left;
			display:inline;
			margin:5px;
		}
		body.larger, .charpter {
			font-size:1.5em;
		}
		body.narrow, .chapter {
			font-size:0.5em;
		}
		.selected {
			font-weight:bold;
			color:#fff;
			background-color:#888;
		}
		button {
			cursor: pointer;
			border: 1px solid #ccc;
		}
		button:hover {
			background-color:#888;
		}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script type="text/javascript">
		$(document).ready(
			function() {
				$('#switcher-default').addClass('selected').bind('click', function() {
					$('body').removeClass('narrow').removeClass('larger');
				});
				$('#switcher-narrow').bind('click', function() {
					$('body').addClass('narrow').removeClass('larger');
				});
				$('#switcher-larger').bind('click', function() {
					$('body').addClass('larger').removeClass('narrow');
				});
				$('#switcher button').bind('click', function() {
					$('#switcher button').removeClass('selected');
					$(this).addClass('selected');
				});
			}
		);
	</script>
</head>
<body>
	
	<div>
		<div id="switcher" class="switcher share-limit">
			<h3>Style Switcher</h3>
			<ul class="btn-ul">
				<li><button id="switcher-default">Default</button></li>
				<li><button id="switcher-narrow">Narrow Column</button></li>
				<li><button id="switcher-larger">Larger Print</button></li>
			</ul>
		</div>
		<div id="container" class="share-limit">
			<p id="content">
  jQuery is a new kind of JavaScript Library.
  jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Lightweight FootprintCSS3 Compliant
			</p>
		</div>
	</div>
</body>

<!DOCUMENT html>
<html>
<head>
	<meta charset="utf-8" />
	<style type="text/css">
		#s_title {
			padding:0;
			margin:auto;
			width:155px;
		}
		#switcher h3:hover {
			cursor:pointer;
			background-color:#faa;
		}
		#switcher h3 {
			padding:0;
			margin:0;
			width:158px;
			height:20px;
			overflow:visible;
			white-space:nowrap;
		}
		#switcher h3:hover {
			background-color:#666;
		}
		
		#head_left {
			float:left;
		}
		#head_right {
			float:right;
			background-color:#678;
			height:100%;
			width:70px;
		}
		#head_right_c {
			height:67px;
			width:67px;
			border-left:3px solid;
			border-bottom:3px solid;
			text-indent:-999999;
		}
		.share-limit {
			width:400px;
			border:solid 3px;
			height:auto;
			float:left;
		}
		.switcher {
			float:left;
			border-bottom:none;
			display:block;
			background-color:#eee;
			height:70px;
		}
		#switcher-default {
			
		}
		#switcher-narrow {
			
		}
		#switcher-larger {
			
		}
		#container {
			border-top:none;
		}
		#content {
			margin:20px;
			margin-top:0px;
			border:solid 1px #000;
			border:10px;
			white-space:pre-wrap;
			text-indent:2em;
			line-height:1.8em;
			float:left;
			position:relative;
		}
		.btn-ul {
			list-style:none;
			text-align:center;
			overflow:hidden;
			white-space:nowrap;
		}
		.btn-ul li {
			list-style:none;
			float:left;
			display:inline;
			padding:0;
			margin:0;
		}
		#container.larger, .charpter {
			font-size:1.5em;
		}
		#container.narrow, .chapter {
			font-size:0.5em;
		}
		.selected {
			font-weight:bold;
			color:#fff;
			background-color:#888;
		}
		li button {
			cursor: pointer;
			border: 1px solid #ccc;
		}
		button:hover {
			background-color:#999;
		}
		.hidden {
			display:none;
		}
		.hover_title_right {
			background-color:#fff;
		}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script type="text/javascript">
		$(document).ready(
			function() {
				$('#switcher-default').addClass('selected');
				$('#switcher button').bind('click', function(event) {
					$('#switcher button').removeClass('selected');
					$(this).addClass('selected');
					$('#container').removeClass().addClass('share-limit').addClass(this.id.split('-')[1]);
					event.stopPropagation();
				});
				$('#switcher h3').click(function(){
					$('#switcher ul').toggleClass('hidden');
				});
				$('#head_right_c').hover(function() {
					$(this).addClass('hover_title_right');
				}, function() {
					$(this).removeClass('hover_title_right');
				});
			}
		);
	</script>
</head>
<body>
	
	<div style="width:400px">
		<div id="switcher" class="switcher share-limit">
			<div id="head_left">
				<div id="s_title">
					<h3>Style Switcher</h3>
				</div>
				<ul class="btn-ul">
					<li><button id="switcher-default">Default</button></li>
					<li><button id="switcher-narrow">Narrow Column</button></li>
					<li><button id="switcher-larger">Larger Print</button></li>
				</ul>
			</div>
			<div id="head_right">
				<div id="head_right_c">
				1
				</div>
			</div>
		</div>
		<div id="container" class="share-limit">
			<p id="content">
  jQuery is a new kind of JavaScript Library.
  jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Lightweight FootprintCSS3 Compliant
			</p>
		</div>
	</div>
</body>