Javascript 需要帮助在HTML中创建选项卡页面吗_Javascript_Jquery_Html_Css_Tabs

Javascript 需要帮助在HTML中创建选项卡页面吗

javascript jquery html css tabs

Javascript 需要帮助在HTML中创建选项卡页面吗,javascript,jquery,html,css,tabs,Javascript,Jquery,Html,Css,Tabs,我正在制作一个有多个选项卡的页面，每个选项卡都有不同的内容。我在网上查找教程，找到了这个网站。我一直在关注它，我已经调整了设置，以使它看起来像我想要的，但是当我尝试点击一个不同的标签时，没有任何改变。我对jquery还很陌生，所以在这个领域我有点困惑，我希望有人能帮助我，让我知道该怎么做问题是，单击时选项卡没有切换 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/

我正在制作一个有多个选项卡的页面，每个选项卡都有不同的内容。我在网上查找教程，找到了这个网站。我一直在关注它，我已经调整了设置，以使它看起来像我想要的，但是当我尝试点击一个不同的标签时，没有任何改变。我对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();
});
});


客房预订





房间选择：

选择房间
舞台通道
壁橱
网格
工作室
会议
en/*----制表符-----*/
.标签{
宽度：100%；
显示：内联块；
}
/*-----选项卡链接-----*/
/*Clearfix*/
.tab链接：之后{
显示：块；
明确：两者皆有；
内容：''；
}
.tab链接李{
利润率：0px 5px；
浮动：左；
列表样式：无；
}
.选项卡链接a{
填充：9px 15px；
显示：内联块；
边界半径：3px 3px 0px 0px；
背景：#7FB5DA；
字体大小：16px；
字号：600；
颜色：#4c；
过渡：全线性0.15s；
}
.选项卡链接a：悬停{
背景#a7cce5；
文字装饰：无；
}
li.active a，li.active a:悬停{
背景：#fff；
颜色：#4c；
}
/*-----选项卡的内容-----*/
.选项卡内容{
填充：15px；
边界半径：3px；
盒影：-1px 1px 1px rgba（0,0,0,0.15）；
背景：#fff；
}
.标签{
显示：无；
}
.tab.active{
显示：块；
}这里是密码
jQuery（文档）.ready（函数（）{
jQuery（'.tabs.tab链接a'）。on（'click'，函数（e）{
var currentAttrValue=jQuery（this.attr（'href'）；
//显示/隐藏选项卡
jQuery（'.tabs'+currentAttrValue）.show（）.hide（）；
//将当前选项卡更改/删除为活动选项卡
jQuery（this）.parent（'li'）.addClass（'active'）.sides（）.removeClass（'active'）；
e、 预防默认值（）；
});
});

谢谢


客房预订

阶段
Studio
会话

`
房间选择：

选择房间
舞台通道
壁橱
网格
工作室
`
会议
`
`.标签{
宽度：100%；
显示：内联块；
}
.tab链接李{
利润率：0px 5px；
浮动：左；
列表样式：无；
填充：9px 15px；
显示：内联块；
边界半径：3px 3px 0px 0px；
背景：#7FB5DA；
字体大小：16px；
字号：600；
颜色：#4c；
过渡：全线性0.15s；
}
.tab链接li:悬停{
背景#a7cce5；
文字装饰：无；
}
李。活动，李。活动：悬停{
背景：#fff；
颜色：#4c；
}
.选项卡内容{
填充：15px；
边界半径：3px；
盒影：-1px 1px 1px rgba（0,0,0,0.15）；
背景：#fff；
}`
.标签{
显示：无；
}
.tab.active{
显示：块；
}`
jQuery（文档）.ready（函数（）{
jQuery（'.tabs.tab links li'）。on（'click'，函数（e）{
选项卡（jQuery（this.attr（'data-toggle'））；
jQuery（this）.addClass（'active'）.sides（）.removeClass（'active'）；
});`
功能选项卡（选项卡）{
jQuery（'.tab content.tab'）.hide（）
jQuery（'.tab content'）.find（tab.show（）；
}
});

首先，您应该包括jquery库，然后更正您的html，并从一开始就使用函数。请保持正确！：我建议您不要在选项卡中使用标签


客房预订

阶段
Studio
会话

`
房间选择：

选择房间
舞台通道
壁橱
网格
工作室
`
会议
`
`.标签{
宽度：100%；
显示：内联块；
}
.tab链接李{
利润率：0px 5px；
浮动：左；
列表样式：无；
填充：9px 15px；
显示：内联块；
边界半径：3px 3px 0px 0px；
背景：#7FB5DA；
字体大小：16px；
字号：600；
颜色：#4c；
过渡：全线性0.15s；
}
.tab链接li:悬停{
背景#a7cce5；
文字装饰：无；
}
李。活动，李。活动：悬停{
背景：#fff；
颜色：#4c；
}
.选项卡内容{
填充：15px；
边界半径：3px；
盒影：-1px 1px 1px rgba（0,0,0,0.15）；
背景：#fff；
}`
.标签{
显示：无；
}
.tab.active{
显示：块；
}`
jQuery（文档）.ready（函数（）{
jQuery（'.tabs.tab links li'）。on（'click'，函数（e）{
选项卡（jQuery（this.attr（'data-toggle'））；
jQuery（this）.addClass（'active'）.sides（）.removeClass（'active'）；
});`
功能选项卡（选项卡）{
jQuery（'.tab content.tab'）.hide（）
jQuery（'.tab content'）.find（tab.show（）；
}
});

首先，您应该包括jquery库，然后更正您的html，并从一开始就使用函数。请保持正确！：我建议您不要使用标签中的标签

对此表示抱歉。如果需要，我也可以添加css。就JQuery而言，它只是该链接中的内容，但是我现在没有它，因为它不是working@R_Chin-您似乎跳过了所遵循的教程的第2步和第3步。@R\u C

<!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>