无法使标签在HTML和JavaScript中工作
[英]Can't get tabs to work in HTML & JavaScript
问题描述
I'm not a JavaScript person so I'm having a little difficulty with what I'm trying to do. 
我不是JavaScript的人，所以我在尝试执行操作时遇到了一些困难。 We have a html page that is supposed to display "tabs" for 3 different details of our product: Description, Details, and Returns. 我们有一个html页面，该页面应该显示产品的3个不同详细信息的“标签”：描述，详细信息和退货。 I can get the tabs to display correctly but the JavaScript isn't changing to the tab when I click on the tab header. 我可以使标签正确显示，但是单击标签标题时JavaScript不会更改为标签。
Here's my html, pretty basic: 这是我的html，非常基本：
<html>
<head>
<link rel="stylesheet" href="skeleton.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<br><br><br>
<ul class="sans tabs">
<li>
<a class="active" href="#tabinfo" style="fonrt-weight:normal">Description</a>
</li>
<li>
<a href="#tabdetails" style="fonrt-weight:normal;color:#999">Details</a>
</li>
<li>
<a href="#returns" style="fonrt-weight:normal;color:#999">Delivery & Returns</a>
</li>
</ul>
<ul class="tabs-content">
<li class="active" id="tabinfo">
<p>A description of the product would go here. A description of the product would go here. A description of the product would go here.
A description of the product would go here. A description of the product would go here. A description of the product would go here. A description of the product would go here.</p>
</li>
<li id="tabdetails">
<ul>
<li>Detail #1</li>
<li>Detail #2</li>
<li>Detail #3</li>
<li>Detail #4</li>
<li>Detail #5</li>
<li>etc.</li>
</ul>
</li>
<li id="returns">
<p>Details about returning a product would go here.</p>
<p>Details about returning a product would go here.</p>
<p>See <a href="/somelink/">Delivery & Returns</a> for more information.</p>
</li>
</ul>
<script src="tabs.js"></script>
</body>
</html>
and of course, the tabs.js file: 当然还有tabs.js文件：
$('body').on('click', 'ul.tabs > li > a', function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
$(this).parent().siblings().children('a').removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
Again, I don't know a whole lot about js so I'm sure it's something to do with that but right now I'm stuck and can't figure it out. 再说一次，我对js并不了解很多，所以我确定这与它有关，但是现在我被卡住了，无法弄清楚。
3 个解决方案
解决方案1
1 已采纳 2013-04-30 11:40:49
You need to wrap your statement in a ready statement.. ie 您需要将您的语句包装在一个现成的语句中。即
$(document).ready(function(e) {
$('body').on('click', 'ul.tabs > li > a', function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
$(this).parent().siblings().children('a').removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
});
This could be neatened up as well: 这也可以消除：
$('body').on('click', 'ul.tabs > li > a', function(e) {
could become 可能成为
$('.tabs').on('click', 'a', function(e) {
解决方案2
0 2013-04-30 11:12:42
Try using this jquery ui tabs . 尝试使用此jquery ui选项卡 。 you will find all the code you need and an explanation on how to apply it in the link provided 您将在提供的链接中找到所需的所有代码以及如何应用的说明
解决方案3
0 2013-04-30 11:13:04
You need to add the Click handler on the Tab headers, instead of on the body 您需要在Tab标题上而不是在正文上添加Click处理程序
$("body ul.tabs li").click(function() {
// the function goes here.
});
This is assuming that you're using jQuery. 假设您使用的是jQuery。 If you're not already using it, you should add this under the head section. 如果尚未使用它，则应在标题下面添加它。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.