jquery手风琴

jquery实现tab切换

$(function () {
     
    $('.nav li').each(function (x) {
     
        $(this).addClass('active').siblings().removeClass();
        $('.content div').eq(x).show().siblings().hide()
    })
}) 

jquery手风琴


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        * {
      padding: 0;margin: 0;}
        .box {
      width: 900px;height: 300px;}
        .box1,.box2,.box3,.box4 {
      float: left;position: relative;}
        .a,.b,.c,.d {
      position: absolute;top: 0;left: 0;width: 100px;height: 300px;}
        .bg {
      background-color: #000;opacity: 0.3;}
p {
      width: 20px;height: 300px;display: inline-block;color: #fff;position: absolute;top: 0;left: 15px;opacity: 1;}
.two {
      left: 53px;}
        img {
      width: 100px;height: 300px;}
        .show {
      width: 600px;}
    style>
    <script src="../jquery-3.4.1.min.js">script>
head>
<body>
    <div class="box">
        <div class="box1">
            <div class="a w bg">
                <p>作者:默默的墨墨p>
                <p class="two">我的个人拉萨之旅故事之城p>
            div>
            <img src="images/u=1081344387,1785290410&fm=26&gp=0.jpg" alt="" class="show">
        div>
        <div class="box2">
            <div class="b w">
                    <p>作者:默默的墨墨p>
                    <p class="two">我的个人拉萨之旅故事之城p>
            div>
            <img src="images/u=1348707900,559674524&fm=26&gp=0.jpg" alt="">
        div>
        <div class="box3">
            <div class="c w">
                    <p>作者:默默的墨墨p>
                    <p class="two">我的个人拉萨之旅故事之城p>
            div>
            <img src="images/u=1407589226,1345601442&fm=26&gp=0.jpg" alt="">
        div>
        <div class="box4">
            <div class="d w">
                    <p>作者:默默的墨墨p>
                    <p class="two">我的个人拉萨之旅故事之城p>
            div>
            <img src="images/u=1686059205,404217172&fm=26&gp=0.jpg" alt="">
        div>
    div>
    <script>
        $(function(){
      
            $('.w').each(function(x){
      
                $(this).click(function(){
      
                    
                    $('.box').find('img').each(function(){
      
                        $(this).removeClass()
                    })
                    $(this).parent().parent().find('img').eq(x).toggleClass('show')

                    $('.box').find('.w').each(function(){
      
                        $(this).removeClass('bg')
                    })
                    $(this).toggleClass('bg')

                })
            })
        })
    script>
body>
html>

你可能感兴趣的:(应用案例,js)