javascript - 需要帮助制作 HTML 标签页

标签 javascript jquery html css tabs

我正在制作一个具有多个选项卡的页面,每个选项卡都有不同的内容。我在网上查找教程并找到了这个网站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();
});
});

谢谢

最佳答案

<!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 我建议你不要在选项卡中使用标签

关于javascript - 需要帮助制作 HTML 标签页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35515142/

相关文章:

javascript - 验证方法不会在第一次单击按钮时触发

javascript - JS/CSS - 函数 openNav() 不适用于主页(仅)

javascript - 检测是否在 Android WebView 中单击了特定按钮

javascript - 相对路径的计算

javascript - 在 Angular2 中使用动态组件时出现错误 "ERROR TypeError: Cannot read property ' createComponent' of undefined"

javascript - 需要使用变量列表中的文本更改 <a> 的文本

jquery - fancybox thumbs 没有办法让它工作

javascript - 如何将字符串保存到 p5.js 中的特定位置

javascript - 如何从输入onkeyup文本框jquery获取原始插入文本

javascript - 使用行跨度在表格中垂直获取下一个表格单元格