我有一个关联数组,其中包含用于代码的
问题出在右侧。右边的列表会自动填充,当它应该是选项卡的内容时,阿巴拉契亚& amp;农村研究"。当我加载页面时,会生成此页面,但是当我单击任何单个链接时,代码可以正常工作,并且只显示与正确选项卡关联的内容区域标题,请参阅下文:
以下是完成所有这些操作的代码:
<!-- Tabbed research areas content -->
<h4>Research Areas</h4>
<hr></hr>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$("#tabs li").click(function() {
// First remove class "active" from currently active tab
$("#tabs li").removeClass('active');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Hide all tab content
$(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn();
// At the end, we add return false so that the click on the link is not executed
return false;
});
});
/* ]]> */
</script>
<div id="tabs_wrapper">
<div id="tabs_container">
<?php
$Researchareas = array(
'1' => 'Appalachian & Rural Studies',
'2' => 'Child Welfare',
'3' => 'Gerontology',
'4' => 'Human Trafficking',
'5' => 'International Social Work',
'5' => 'Intimate Partner Violence',
'7' => 'LGBTQ',
'8' => 'Substance Abuse and Misuse',
'9' => 'Suicide Survivors and Bereavement',
'10' => 'Trauma and Post-Traumatic Stress',
'11' => 'Veterans and Military Social Work'
);
?>
<ul id="tabs">
<?php
foreach ($Researchareas as $key => $value){
$tabname = 'tab'.$key;
?>
<li><a href="#<?php echo $tabname ?>"><?php echo $value ?></a></li>
<?php } ?>
</ul>
</div>
<div id="tabs_content_container">
<?php
foreach ($Researchareas as $key => $value) {
$divtab = 'tab'.$key;
?>
<div id="<?php _e($divtab); ?>" class="tab_content" style="display: block;">
<h4><?php _e($value); ?></h4>
</div>
<?php } ?>
</div>
</div>
<!--end tabbed research content area-->
我基本上只需要在页面加载时不要在完整列表中加载所有数组值,而是只需准确显示第一个选项卡,就像在第二个图像中一样。我不知道我错过了什么,但我绝对是。非常感谢任何帮助,我将永远感激。
答案 0 :(得分:0)
可能是您应该触发初始点击。您只需绑定click事件,但有人必须首先单击它以显示某些效果。所以在绑定函数之后只需添加:
$("#tabs li:first").trigger("click");
答案 1 :(得分:0)
您应该从HTML中删除display:block
,因为它会覆盖您的CSS。
如果你这样做了,它们都将是隐形的,所以你应该只需要将第一个文件放在文档准备就绪上,例如:
$(".tab_content").first().css('display', 'block');