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

我正在制作一个包含多个标签的页面，每个标签都有不同的内容。我在网上查找教程，发现这个网站http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery。我一直在关注它，我调整了设置，使其看起来如何，但是当我尝试点击不同的选项卡时没有任何更改。我对jQuery仍然很陌生，所以我在这个领域有点困惑，我希望有人能帮助我，让我知道该怎么做。需要帮助制作HTML中的标签页

的问题是，该标签未在点击

<!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(); 
}); 
});

感谢

来源

2016-02-19 R_Chin

对不起。如果需要的话，我也可以添加CSS。就JQuery而言，它就是那个链接中的内容，但是我现在没有它，因为它不起作用 –

@R_Chin - 你似乎跳过了你所关注的教程的第2步和第3步。 – Quentin

@R_Chin - 你如何将JavaScript链接到HTML？ – Quentin

<!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，并使用类函数从开始转换，请，是真实的！：D我建议你不要在标签中使用标签

来源

2016-02-19 22:15:47

我补充说该HTML和它正在工作和切换标签！谢谢。但是，现在文本的正文并未更改为正确的选项卡。这是一个HTML问题？ –

你能详细解释一下吗？不知道我明白你的意思 –

当我点击一个新标签时，内容不会改变。因此，例如当我点击舞台标签时，它应该在正文中显示与当我点击演播室标签时不同的内容 –

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

回答

相关问题