tab栏切换

分手后的思念是犯贱 2022-12-28 11:08 192阅读 0赞

## tab栏切换 ##

**1、jquery方式**  
首先引入 jquery.js 文件

<style type="text/css">
    		    * {
    		        margin: 0;
    		        padding: 0;
    		    }
    		    ul {
    		        list-style: none;
    		    }
    		    .wrapper {
    		        width: 1000px;
    		        height: 475px;
    		        margin: 0 auto;
    		        margin-top: 100px;
    		    }
    		    .tab {
    		        border: 1px solid #ddd;
    		        border-bottom: 0;
    		        height: 36px;
    		        width: 320px;
    		    }
    		    .tab li {
    		        position: relative;
    		        float: left;
    		        width: 80px;
    		        height: 34px;
    		        line-height: 34px;
    		        text-align: center;
    		        cursor: pointer;
    		        border-top: 4px solid #fff;
    		    }	
    		    .tab span {
    		        position: absolute;
    		        right: 0;
    		        top: 10px;
    		        background: #ddd;
    		        width: 1px;
    		        height: 14px;
    		        overflow: hidden;
    		    }
    		    .products {
    		        width: 1002px;
    		        border: 1px solid #ddd;
    		        height: 476px;
    		    }
    		    .products .main {
    		        float: left;
    		        display: none;
    		    }
    		    .products .main.selected {
    		        display: block;
    		    }
    		    .tab li.active {
    		        border-color: red;
    		        border-bottom: 0;
    		    }
    		</style>
    	</head>
    	<body>
    		<div class="wrapper">
    		    <ul class="tab">
    		        <li class="tab-item active">国际大牌<span>◆</span></li>
    		        <li class="tab-item">国妆名牌<span>◆</span></li>
    		        <li class="tab-item">清洁用品<span>◆</span></li>
    		        <li class="tab-item">男士精品</li>
    		    </ul>
    		    <div class="products">
    		        <div class="main selected">
    		            <a href="###"><img src="img/images/guojidapai.jpg" alt=""/></a>
    		        </div>
    		        <div class="main">
    		            <a href="###"><img src="img/images/guozhuangmingpin.jpg" alt=""/></a>
    		        </div>
    		        <div class="main">
    		            <a href="###"><img src="img/images/qingjieyongpin.jpg" alt=""/></a>
    		        </div>
    		        <div class="main">
    		            <a href="###"><img src="img/images/nanshijingpin.jpg" alt=""/></a>
    		        </div>
    		    </div>
    		</div>
    		<script src="js/jquery.js"></script>
    		<script>
    			var index = 0;
                 //获取所有图片
    			var banner = $('.main')
    			//获取所有li
    			var lis = $('.tab li');
    			lis.click(function(){
    				index = $(this).index();
    				$(this).addClass('active').siblings().removeClass('active');
    				banner.eq(index).addClass('selected').siblings().removeClass('selected')
    			})
    
    		</script>
    		
    	</body>

样式和图片可以自己改

**2、vue方法**  
引入vant组件

<van-tabs v-model="active">
      <van-tab title="标签 1">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs>
    export default {
      data() {
        return {
          active: 2,
        };
      },
    };

详情参考(https://youzan.github.io/vant/\#/zh-CN/tab)

<van-tabs v-model="active" color="#000" sticky>
    		  <van-tab title="推荐" class="category-tabcon">
    			  <ul>
    				  <li class="category-item recommend" v-for="(item,index) in recommend"  :key="index">
    					 <div class="category-card">
    					 	<div class="category-wrapper">
    					 		<img :src="item.url" alt="">
    					 	</div>
    					 	<div class="category-info">
    					 		<div class="category-info-text">
    					 			<p class="category-title">{
       {item.title}}</p>
    					 			<div class="category-desc">{
       {item.desc}}</div>
    					 		</div>
    					 		<div class="category-action">
    					 			<div class="category-price">
    					 				<span>{
       {item.price}}</span>
    					 			</div>
    					 		</div>
    					 	</div>
    					 </div> 
    				  </li>  
    			  </ul>
    		  </van-tab>
    		  </van-tabs>

<script>
    export default{
    		data(){
    			return{
    				active:'1',
    				recommend:[
    				{ url:require(""),
    					    title:'',
    						desc:'',
    						price:''}
    				]
    				}
    				}
    				}
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 3.3.1-练习：tab栏切换

jQuery实现简易的tab栏切换 <!DOCTYPE html> <html lang="en"> <head> <met

冷不防/ 2023年07月15日 09:29/ 0 赞/ 102 阅读

相关 js实现tab栏切换

![在这里插入图片描述][20200304175315638.PNG] html+css <style> .tab2 { wid

拼搏现实的明天。/ 2023年07月11日 06:24/ 0 赞/ 13 阅读

相关 tab栏的简单切换

tab栏的简单切换样式不是很好看，主要的是思路和逻辑上代码： <!DOCTYPE html> <html lang="en"> <

绝地灬酷狼/ 2023年07月08日 09:22/ 0 赞/ 25 阅读

相关 jquery 基础+Tab栏切换案例

类操作在原生JS里面className会覆盖元素原来有的类名 jquery里面的类操作就不会这样,只对指定类进行操作,不影响原先的类名添加类名 add

Bertha 。/ 2023年07月08日 05:48/ 0 赞/ 9 阅读

相关 jQuery样式操作（Tab栏切换）

一、操作方法主要有两种方法：一种是操作css方法，另外一种是设置类样式。操作css方法 1. 参数只写属性名，则返回属性值 2. 参数是属性名，属性值，逗号隔

心已赠人/ 2023年07月03日 13:28/ 0 赞/ 7 阅读

相关利用js实现Tab栏的切换功能

在很多网页都有这一模块的开发,所以今天我也来做一下,这个模块很重要. 几乎在每个网站都可以看得到成果图展示![在这里插入图片描述][20200202152236944

我就是我/ 2023年07月03日 04:52/ 0 赞/ 120 阅读

相关 tab栏切换

tab栏切换 1、jquery方式首先引入 jquery.js 文件 <style type="text/css"> {

分手后的思念是犯贱/ 2022年12月28日 11:08/ 0 赞/ 193 阅读

相关 tab栏切换练习

![在这里插入图片描述][20200806104510340.gif] <!DOCTYPE html> <html lang="en"> <head> <meta c

绝地灬酷狼/ 2022年11月24日 12:56/ 0 赞/ 166 阅读

相关 jQuery特效Tab切换栏选项卡demo

在建站过程中，有时候需要有效利用页面空间，需要将多个模块的链接、图片、视频等网站资源放在一个div中，实现点击或者滑动实现展示多个模块，多用在侧边栏展示网站最新更新、最热文章，

约定不等于承诺〃/ 2022年11月10日 14:19/ 0 赞/ 244 阅读

相关 jQuery实战_tab栏切换

jQuery实现tab栏切换 HTML结构： <ul> <li class="active">第一栏</li> <li>第二

朱雀/ 2022年05月22日 12:40/ 0 赞/ 308 阅读