如何样用JS开发标签页切换的效果

JavaScript022

如何样用JS开发标签页切换的效果,第1张

代码如下：

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>tab标签切换效果</title>

<style>

*{ margin:0padding:0list-style: none}

body {font:12px/1.5 Tahoma}

#outer {width:450pxmargin:150px auto}

#tab {overflow:hiddenzoom:1background:#000border:1px solid #000}

#tab li {float:leftcolor:#fffheight:30px cursor:pointer line-height:30pxpadding:0 20px}

#tab li.current {color:#000background:#ccc}

#content {border:1px solid #000border-top-width:0}

#content ul {line-height:25pxdisplay:none margin:0 30pxpadding:10px 0}

</style>

</head>

<body>

<!-- html代码begin -->

<div id="outer">

<ul id="tab">

<li class="current">tab标签</li>

<li>qq在线客服代码</li>

<li>css3</li>

</ul>

<div id="content">

<ul style="display:block">

<a href="">tab标签</a>

</ul>

<ul>

<a href="">服代码</a>

</ul>

<ul>

<a href="">css</a>

</ul>

</div>

</div>

<!-- html代码end -->

<script src="jquery.min.js"></script>

<script>

js使用video标签当切换视频时会显示上一个视频是video标签没有改。如果直接把标签替换掉的话，第一次是可以播放，但再切换别的src还是会显示第一个播放的视频的src。所以，正确方法是连同video标签一起换了。