[英]Removing element from link ID for jQuery tab script
I have a jQuery tab script that gets content from a PHP file defined by the link and parses it to a div element.我有一个 jQuery 选项卡脚本,它从链接定义的 PHP 文件中获取内容并将其解析为 div 元素。 The ID for each link is used to pull content from the correct file however type_ is needed in the link ID for the tabs to work which then doesn't pull content from the right place.
每个链接的 ID 用于从正确的文件中提取内容,但是在链接 ID 中需要 type_ 才能使选项卡正常工作,这样就不会从正确的位置提取内容。 How can I resolve this issue?
我该如何解决这个问题?
This is my current jQuery code:这是我当前的 jQuery 代码:
function load(url){
$.ajax({
url:url,
success:function(message){
$("#content").html(message);
}
});
}
$(document).ready(function(){
$("[id^=type_]").click(function(){
type=$(this).attr("id");
url=""+type+".php";
$("[id^=type_]").removeClass("selected");
$("#"+type).addClass("selected");
load(url);
return false;
});
$("#type_search").click();
});
This is my HTML code:这是我的 HTML 代码:
<ul>
<li><a id="type_tab1" href="javascript:void(null);">Tab1</a></li>
<li><a id="type_tab2" href="javascript:void(null);">Tab2</a></li>
<li><a id="type_tab3" href="javascript:void(null);">Tab3</a></li>
</ul>
From your description, I assume you mean the content is located at tab1.php
, tab2.php
, etc and the problem is with your type_
prefix in the ID.根据您的描述,我假设您的意思是内容位于
tab1.php
、 tab2.php
等,问题出在 ID 中的type_
前缀。
Option #1 - Most like your code选项 #1 - 最像您的代码
I don't think you need type_
in the id.我认为您不需要在 id 中输入
type_
。 Seems like you could accomplish the same thing with a class='tab'
on each of your anchors like似乎您可以在每个锚点上使用
class='tab'
来完成相同的事情,例如
<li><a id="tab1" class="tab" href="javascript:void(null);">Tab1</a></li>
and then do然后做
$('.tab').click(function() {
var tabId = $(this).attr("id");
var url=""+tabId+".php";
$('.tab').removeClass("selected");
$('#' + tabId).addClass("selected");
load(url);
return false;
}
Option #2 - Cleaner and makes more sense选项 #2 - 更干净,更有意义
There's no reason to overload the ID attribute with the url of your content.没有理由使用您的内容的 url 来重载 ID 属性。 Try:
尝试:
<li><a id="tab1" class="tab" href="/path/to/content/tab1.php">Tab1</a></li>
Normally, this would take you to the content, but you can prevent the default behavior by:通常,这会将您带到内容,但您可以通过以下方式阻止默认行为:
$('.tab').click(function(event) {
// Prevent actually going to the content
event.preventDefault();
// Adjust tabs
var $currentTab = $(this);
$('.tab').removeClass("selected");
$currentTab.addClass("selected");
// Load content from the href attribute of the tab
load($currentTab.attr("href"));
return false;
}
Option #3 - This is already a JQuery Extension选项 #3 - 这已经是 JQuery 扩展
Have you considered using JQuery UI Tabs?您是否考虑过使用 JQuery UI 选项卡? http://jqueryui.com/demos/tabs/ I've found the demo site to be a bit wonky sometimes, but JQuery UI is very popular, stable, and flexible.
http://jqueryui.com/demos/tabs/我发现演示站点有时有点不稳定,但 JQuery UI 非常流行、稳定且灵活。 There is an option to load content via AJAX.
有一个通过 AJAX 加载内容的选项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.