①Tab栏切换有2个大的模块
②上的模块选项卡,点击某-个,当前这一个底色会是红色,餘不变(排他思想)修改类名的方式
③下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
④规律:下面的模块显示内容和上面的选项卡一对应 ,相匹配。
⑤核心思路:给上面的tab_ list 里面的所有小i添加自定义属性,属性值从0开始编号。
⑥当我们点击tab_ list 里面的某个小i,让tab_ con 里面对应序号的内容显示,其余隐藏(排他思想)
js利用DOM制作选项卡tab栏切换案例演示教程
案例js代码:
- <style>
- #nav {
- width: 700px;
- background-color: #E9EBE8;
- margin: 0 auto;
- text-align: center;
- height: 50px;
- }
-
- ul {
- margin: 0;
- padding: 0;
- list-style: none;
- }
-
- ul li {
- display: inline-block;
- line-height: 50px;
- padding: 0 20px;
- cursor: pointer;
- }
-
- #nav ul .cur {
- color: #fff;
- background-color: red;
- }
-
- #contact {
- width: 700px;
- margin: 0 auto;
- }
-
- .item {
- display: none;
- }
-
- #contact div:first-child {
- display: block;
- }
- </style>
- <div id="nav">
- <ul>
- <li class="cur">自丢网介绍</li>
- <li>关于自丢网</li>
- <li>自丢网新闻</li>
- <li>自丢网产品</li>
- <li>自丢网首页</li>
- </ul>
- </div>
- <div id="contact">
- <div class="item">我是公司介绍</div>
- <div class="item">我是关于我们</div>
- <div class="item">我是新闻资讯</div>
- <div class="item">我是产品中心</div>
- <div class="item">我是网站首页</div>
- </div>
- <script>
- var nav = document.querySelector('#nav');
- var lis = nav.querySelectorAll('li');
- var items = document.querySelector('#contact').querySelectorAll('.item');
- for (i = 0; i < lis.length; i++) {
- lis[i].setAttribute('index', i);
- lis[i].onclick = function() {
- for (var i = 0; i < lis.length; i++) {
- lis[i].className = '';
- }
- this.className = 'cur';
- var index = this.getAttribute('index');
- for (var i = 0; i < items.length; i++) {
- items[i].style.display = 'none';
- }
- items[index].style.display = 'block';
- }
- }
- </script>
复制代码
|
|