Question

我正在制作一个包含多个标签的网页，每个标签都包含不同的内容。我在网上查找了教程并找到了这个网站http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery。我一直在关注它，我已经将设置调整到我希望它看起来如何，但是当我尝试点击不同的选项卡时没有任何变化。我仍然对jquery很新，所以我在那个领域有点困惑，我希望有人可以帮助我，让我知道该怎么做。

问题是标签在点击

时没有切换

<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" type="text/css" href="./common/res.css"/>
    <meta charset="utf-8">
    <title>Room Reservation</title>
</head>
<header>
</header>
<body>
    <div class="tabs">
        <ul class="tab-links">
            <li class="active"><a href="#tab1">Stage</a></li>
            <li><a href="#tab2">Studio</a></li>
            <li><a href="#tab3">Session</a></li>
        </ul>

<div class="tab-content">
    <div id="tab1" class="tab active">
        <form>
            Room Selection:<br>
            <select name="room">
                <option value="">Select Room</option>
                <option value="stage">Stage Access</option>
                <option value="grip">Grip Closet</option>
                <option value="grid">Grid</option>
    </div>
    <div id="tab2" class="tab">
        <p>Studio</p>
    </div>

    <div id="tab3" class="tab">
        <p>Session</p>
    </div>
</div>
</div>
</body>
</html>


en/*----- Tabs -----*/
.tabs {
width:100%;
display:inline-block;
}

/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
    display:block;
    clear:both;
    content:'';
}

.tab-links li {
    margin:0px 5px;
    float:left;
    list-style:none;
}

    .tab-links a {
        padding:9px 15px;
        display:inline-block;
        border-radius:3px 3px 0px 0px;
        background:#7FB5DA;
        font-size:16px;
        font-weight:600;
        color:#4c4c4c;
        transition:all linear 0.15s;
    }

    .tab-links a:hover {
        background:#a7cce5;
        text-decoration:none;
    }

li.active a, li.active a:hover {
    background:#fff;
    color:#4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
    padding:15px;
    border-radius:3px;
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
    background:#fff;
}

    .tab {
        display:none;
    }

    .tab.active {
        display:block;
    }ter code here


jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e)  {
    var currentAttrValue = jQuery(this).attr('href');

    // Show/Hide Tabs
    jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active
           jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault();
});
});

由于

Answer 1

<!DOCTYPE html><html>
<head>
    <script         src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <meta charset="utf-8">
    <title>Room Reservation</title>
</head>
<header>
</header>
<body>
<div class="tabs">
    <ul class="tab-links">
        <li class="active" data-toggle="#tab1">Stage</a></li>
        <li data-toggle="#tab2">Studio</li>
        <li data-toggle="#tab3">Session</li>
    </ul>
</div>`
<div class="tab-content">
    <div id="tab1" class="tab active">
        <form>
            Room Selection:<br>
            <select name="room">
                <option value="">Select Room</option>
                <option value="stage">Stage Access</option>
                <option value="grip">Grip Closet</option>
                <option value="grid">Grid</option>
            </select>
        </form>
    </div>
    <div id="tab2" class="tab">
        <p>Studio</p>
    </div>`

    <div id="tab3" class="tab">
        <p>Session</p>
    </div>
</div>
<style>`
`.tabs {
    width:100%;
    display:inline-block;
}
.tab-links li {
    margin:0px 5px;
    float:left;
    list-style:none;
    padding:9px 15px;
    display:inline-block;
    border-radius:3px 3px 0px 0px;
    background:#7FB5DA;
    font-size:16px;
    font-weight:600;
    color:#4c4c4c;
    transition:all linear 0.15s;
}
.tab-links li:hover {
    background:#a7cce5;
    text-decoration:none;
}
li.active, li.active:hover {
    background:#fff;
    color:#4c4c4c;
}
.tab-content {
    padding:15px;
    border-radius:3px;
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
    background:#fff;
 }`

 .tab {
    display:none;
 }

.tab.active {
    display:block;
}`

</style>
<script>
    jQuery(document).ready(function() {
        jQuery('.tabs .tab-links li').on('click', function(e)  {
        tabs(jQuery(this).attr('data-toggle'));
        jQuery(this).addClass('active').siblings().removeClass('active');
        });`

        function tabs(tab) {
            jQuery('.tab-content .tab').hide()
            jQuery('.tab-content').find(tab).show();
        }
    });
    </script>
    </body>
</html>

首先你应该包括jquery库，然后更正你的html，并从开始使用fucntions，是真的！：D我建议你不要在标签中使用标签

需要帮助在HTML中制作标签页

1 个答案: