竖向滑动标签DEMO

最新推荐文章于 2024-09-30 14:28:41 发布

weixin_34056162

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量83

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/kisswu/blog/54816

版权

为什么80%的码农都做不了架构师？>>>

问题来源：http://my.oschina.net/zui/tweet/678972

这个哥们要的效果如下：

Demo演示效果：

为方便我就直接使用了jQuery了，请保证机器能联网，或自行加载jQuery文件

实现代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DEMO</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){

var $uli = $(".left li");
var $oli = $(".right li");

//初始化样式
$uli[0].style.background = '#006699';
$oli[0].style.display="block";

//each 遍历 add事件
$uli.each(function(n){

	$(this).mouseover(function(){
	
//此处完全可以用 jQuery 的 removeClass 和 addClass 来做，不知道哪里出错了，就是不行。。可恶~~
	for(i=0;i<$uli.length;i++)
	{
		if(i==n)
		{
		$uli[i].style.background = "#006699";
		$oli[i].style.display = "block";
		}else{
		$uli[i].style.background = "#0099FF";
		$oli[i].style.display = "none";
		}
		}//End for		
	})

})



})

</script>
<style>
*{ margin:0px; padding:0px;}
body{ background:#FFFFFF;}
ol,ul{ list-style:none; margin:0px;}
.box{ height:300px;}
.left{ width:20px; height:300px; background: #FFFFFF; float:left;}
.left li{ height:50px;margin-bottom:5px; background: #0099FF; color:#FFFFFF; text-align:center; line-height:50px;}
.right{ width:280px; height:300px; background: #006699; float:left; color:#FFFFFF; font-size:50px;}
.right li{ width:280px; height:300px; background:#006699; display:none; text-align:center}

</style>
</head>

<body>

<div class="box">

	<ul class="left">
		<li class="selected">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>

		<li>5</li>
	</ul>

	<ol class="right">
		<li>Box1</li>
		<li>Box2</li>
		<li>Box3</li>

		<li>Box4</li>
		<li>Box5</li>
	</ol>

</div>


</body>
</html>

转载于:https://my.oschina.net/kisswu/blog/54816