CSS, JavaScript, jQuery实现标签页切换

效果图参考：

基本实现如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}.outer {width: 60%;margin: 50px auto;background-color: #99aecb;height: 500px;}.title {background-color: #cccccc;border-bottom: red solid 1px;}.title li {display: inline-block;padding: 10px;}.title .activate {color: white;background-color: red;}.hide {display: none;}</style>
</head>
<body><div class="outer"><ul class="title"><li class="activate" relate="1">商品介绍</li><li relate="2">规格包装</li><li relate="3">售后保障</li></ul><div class="content"><div id="1">page1</div><div class="hide" id="2">page2</div><div class="hide" id="3">page3</div></div>
</div></body>
<script src="jquery-3.2.1.js"></script>
<script>//点击title内的三个标题，this增加activate，其余去除activate//取得this的索引，根据索引取出content中对应的页面，去除hide, 其余页面加hide//jq事件委派$(".title").on("click", "li", function () { //记住，子元素没有$$(this).addClass("activate");$(this).siblings().removeClass("activate");var $index = $(this).index();$(".content div").eq($index).removeClass("hide").siblings().addClass("hide");});//jq事件绑定实现//    $("li").click(function(){//        $(this).addClass("activate");//        $(this).siblings().removeClass("activate");//        var $index = $(this).index();//        $(".content div").eq($index).removeClass("hide").siblings().addClass("hide");//    });/// JS 实现 //////    var tabs = document.getElementsByClassName("title")[0].children;//    var pages = document.getElementsByClassName("content")[0].children;////    for (var i=0; i<tabs.length; i++) {//        //为每个标题都绑定函数//        tabs[i].onclick = function() {//            //每次执行函数都要遍历所有标题，判断为当前点击标题，增加"activate"，否则移除"activate"//            for(var j=0; j<tabs.length; j++) {//                if (tabs[j]==this) {//                    tabs[j].classList.add("activate");//                    relateId = this.getAttribute("relate"); //当前点击元素relate属性对应的id值////                } else {//                    tabs[j].classList.remove("activate")//                }//            }////            //根据自定义的relate属性，将标题和页面关联起来//            var relateId = this.getAttribute("relate");//            //当前激活标签relate属性对应的id，通过它，找到对应的显示页面//            var current_page = document.getElementById(relateId);//            for (var k=0; k<pages.length; k++) {//                if (pages[k] == current_page) {//                    pages[k].classList.remove("hide");//                } else {//                    pages[k].classList.add("hide");//                }//            }//        };//    }
</script></html>

CSS, JavaScript, jQuery实现标签页切换相关推荐

用css和jquery实现标签页效果（一）
用css和jQuery实现一个简单的标签页效果,用css实现斜边导航的效果,除了ie6其他的浏览器都支持, 其效果如下 css样式: <style type="text/css ...
JavaScript 实现标签页切换效果
JavaScript 实现标签页切换效果构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id="tab">& ...
php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
BootStrap之标签页切换
标签页切换标签页切换标签页插件第一个官方例子调用tab("show")显示tab-pane中的内容第一个例子的HTML+CSS代码 fade in效果函数介绍前提条件 ...
Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行环境配置: Jdk1.8 + Tomcat8 ...
生日祝福（HTML+CSS+JavaScript+jQuery）
生日倒计时下载地址:[生日祝福(HTML+CSS+JavaScript+jQuery).zip-教育文档类资源-CSDN下载]
【Axure RP9基础】 Axure标签页切换详解
[Axure RP9基础] 标签页切换在设计原型中,PC和APP端标签页切换是常用的功能,那么在用Axure画原型时我们可以用矩形和动态面板做出标签页切换的效果. 最终效果:点击标签页,显示标签页选 ...
微信小程序中标签页切换效果是怎么做出来的
于传统网页开发中的标签页切换效果不同的是,小程序的标签页切换更接近原生APP的交互体验!也就是可以通过左右滑动页面进行切换,类似于网页开发中的焦点图切换的效果. --这当然是通过微信小程序强大的组件和 ...
Python爬虫之selenium对标签页切换、切换frame标签、cookie处理、执行js代码、开启无界面、以及使用代理ip和替换user-agent等方法
一.selenium对标签页切换.切换frame标签.cookie处理.执行js代码.开启无界面.以及使用代理ip和替换user-agent等方法 (一).selenium标签页的切换当seleni ...

CSS, JavaScript, jQuery实现标签页切换

CSS, JavaScript, jQuery实现标签页切换相关推荐

最新文章

热门文章