alpine+tailwind实现一个tab标签页效果代码-html代码-BFW代码库

alpine+tailwind实现一个tab标签页效果代码

代码语言：html

所属分类：选项卡

代码描述：alpine+tailwind实现一个tab标签页效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.01.css">


</head>

<body  >
  <div class="min-h-screen py-6 flex flex-col justify-center sm:py-12">
    <section class="py-20 mx-auto space-y-8 sm:py-20">
        <div style='width:800px;' class="container flex flex-row items-stretch justify-center w-full max-w-4xl space-x-12" x-data="{tab: 1}">
            <div class="flex flex-col justify-start w-1/4 space-y-4">
                <a class="px-4 py-2 text-sm" :class="{'z-20 border-l-2 transform translate-x-2 border-blue-500 font-bold': tab === 1, ' transform -translate-x-2': tab !== 1}" href="#" @click.prevent="tab = 1">
                    BATMAN & ROBIN
                </a>
                <a class="px-4 py-2 text-sm" :class="{'z-20 border-l-2 transform translate-x-2 border-blue-500 font-bold': tab === 2, ' transform -translate-x-2': tab !== 2}" href="#" @click.prevent="tab = 2" @click.prevent="tab = 2">
                    BATMAN V SUPERMAN: DAWN OF JUSTICE (2016)
                </a>
                <a class="px-4 py-2 text-sm" :class="{'z-20 border-l-2 transform translate-x-2 border-blue-500 font-bold': tab === 3, ' transform -translate-x-2': tab !== 3}" href="#" @click.prevent="tab = 3" @click.prevent="tab = 3">
                    BATMAN FOREVER (1995)
                </a>
                <a class="px-4 py-2 text-sm" :class="{'z-20 border-l-2 transform translate-x-2 border-blue-500 font-bold': tab === 4, ' transform -translate-x-2': tab !== 4}" href="#" @click.prevent="tab = 4" @click.prevent="tab = 4">
                    BATMAN: THE K.........完整代码请登录后点击上方下载按钮下载查看