需要幫助以HTML制作標簽頁

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，請正確！ ：DI提示您不要在標簽中使用標簽

需要幫助以HTML制作標簽頁

問題描述

1 個解決方案

解決方案1
0 2016-02-19 22:15:47

需要幫助以HTML制作標簽頁

問題描述

1 個解決方案

解決方案1 0 2016-02-19 22:15:47

解決方案1
0 2016-02-19 22:15:47