如何在加载页面时将焦点集中在特定选项卡上
how to focus on a specific tab when page loads
在我的页面上,我有一些自定义链接(选项卡)。单击相应的链接,就会显示其内容。默认情况下,选择第一个选项卡类并显示其内容。其余设置为显示:无;单击任何其他链接都会将选定的类分配给它,并将其设置为显示:块;其余显示:none;。这是加载页面时的html。
Html
<div class="vtabs">
<a href="#tab-order" class="selected">Order Details</a> // by default its class is selected
<a href="#tab-payment">Payment Details</a>
<a href="#tab-shipping">Shipping Details</a>
<a href="#tab-product">Products</a><a href="#tab-history">History</a>
<a id="label_tab" href="#tab-label">HX Endicia Labels</a>
</div>
<div id="tab-order" class="vtabs-content" style="display: block;">Tab1</div>
<div id="tab-payment" class="vtabs-content" style="display: none;">Tab2</div>
<div id="tab-shipping" class="vtabs-content" style="display: none;">Tab3</div>
<div id="tab-product" class="vtabs-content" style="display: none;">Tab4</div>
<div id="tab-label" class="vtabs-content" style="display: none;">Tab5</div>
我想要的是检查一下,如果某个给定的条件为真,则在页面加载时加载最后一个选项卡。像
Html
<div class="vtabs">
<a href="#tab-order">Order Details</a>
<a href="#tab-payment">Payment Details</a>
<a href="#tab-shipping">Shipping Details</a>
<a href="#tab-product">Products</a><a href="#tab-history">History</a>
<a id="label_tab" href="#tab-label" class="selected">HX Endicia Labels</a>
</div>
<div id="tab-order" class="vtabs-content" style="display: block;">Tab1</div>
<div id="tab-payment" class="vtabs-content" style="display: none;">Tab2</div>
<div id="tab-shipping" class="vtabs-content" style="display: none;">Tab3</div>
<div id="tab-product" class="vtabs-content" style="display: none;">Tab4</div>
<div id="tab-label" class="vtabs-content" style="display: none;">Tab5</div>
为此,我在视图文件中做了一些类似的事情,但没有成功。iam在控制台中获取此错误"Uncaught TypeError:无法设置属性"className"为null"
<script type="text/javascript">
function run(){
alert('testing');
document.getElementById('label_tab').className = 'selected';
document.getElementById('tab-label').style.display = 'block';
}
function hideAllTabs() {
var tab_contents = document.getElementsByClassName('vtabs-content');
for (var i = 0; i < tab_contents.length; ++i) {
tab_contents.style.display = 'none';
}
}
<?php
if (!isset($labeltab)) {
echo "hideAllTabs();";
echo "run();";
}
?>
</script>
您所拥有的代码将起作用。您只需要确保脚本代码是:
a) HTML 下方
b) 页面加载完成后运行。
在你的位置上,我会创建一个函数,首先,隐藏所有选项卡,帮助你避免同时打开多个选项卡。
一个简单的Javascript函数来隐藏您的选项卡(因为它们都共享同一个类):
function hideAllTabs() {
var tab_contents = document.getElementsByClassName('vtabs-content');
for (var i = 0; i < tab_contents.length; ++i) {
tab_contents.style.display = 'none';
}
}
您可以将我的解决方案与FIDDLE 上的选项卡一起使用
此处为HTML:
<div class="tab-nav">
<ul class="tabs">
<li rel="tab1" class="active">Tab1</li>
<li rel="tab2">Tab2</li>
<li rel="tab3">Tab3</li>
</ul>
</div>
<div class="tabsContent">
<div id="tab1" class="tab active">
1Lorem ipsum dolor sit amet, consectetur adipisicing elit.1
</div>
<div id="tab2" class="tab">
2Lorem ipsum dolor sit amet, consectetur adipisicing elit.2
</div>
<div id="tab3" class="tab">
3Lorem ipsum dolor sit amet, consectetur adipisicing elit.3
</div>
</div>
JS此处:
jQuery(document).ready(function(){
jQuery('.tabs li').on('click', function(){
jQuery('.tabs li.active').removeClass('active');
jQuery(this).addClass('active');
var selectTab = jQuery(this).attr('rel');
jQuery('.tab.active').hide(0,tab);
function tab() {
jQuery(this).removeClass('active');
jQuery('#'+selectTab).show(0,function(){
jQuery(this).addClass('active');
});
}
});
});
和CSS在这里:
.tab-navigacija{
margin-top: 80px;
}
ul.tabs{
list-style: none;
margin:0;
padding:0;
}
ul.tabs li{
float: left;
padding:10px;
cursor: pointer;
}
ul.tabs li.active{
background: #efefef;
}
.tab{
display: none;
background: #efefef;
padding:20px;
}
.tab.active{
display: block;
}
.tabsContent {
clear: both;
display: block;
width: 100%;
}
您可以将我的解决方案与FIDDLE 上的选项卡一起使用
似乎不需要js,只需要使用php:
<div class="vtabs">
<a href="#tab-order" <?php echo isset($labeltab) ? "class='selected'" : "" ; ?>>Order Details</a> // by default its class is selected
<a href="#tab-payment">Payment Details</a>
<a href="#tab-shipping">Shipping Details</a>
<a href="#tab-product">Products</a>
<a href="#tab-history">History</a>
<a href="#tab-label" <?php echo !isset($labeltab) ? "class='selected'" : "" ; ?>>HX Endicia Labels</a>
</div>
<div id="tab-order" class="vtabs-content" <?php echo isset($labeltab) ? "style='display: block;'" : "style='display: none;'" ; ?>>Tab1</div>
<div id="tab-payment" class="vtabs-content" style="display: none;">Tab2</div>
<div id="tab-shipping" class="vtabs-content" style="display: none;">Tab3</div>
<div id="tab-product" class="vtabs-content" style="display: none;">Tab4</div>
<div id="tab-label" class="vtabs-content" <?php echo !isset($labeltab) ? "style='display: block;'" : "style='display: none;'" ; ?>>Tab5</div>
相关文章:
- keyup事件处理程序更改焦点不适用于快速键入
- 单击时将焦点更改为元素
- 在jstree中,如何将指定的节点集中到大型树上
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 在IE9中的输入字段中输入焦点最近按钮
- Javascript游戏输入失去焦点
- Don'不允许将焦点集中在自动完成的选择上
- 在自动重影文本区域中打字时,会将焦点集中在元素的顶部
- 如何将焦点集中在除某些条件外的单个文本框上
- AngularJS - ngRepeat.在 ng 重复重新渲染后,需要将焦点集中在相同的元素事件上
- 如何强制将焦点集中在动态添加的 SPAN 上
- JavaScript焦点()函数没有't将文本区域集中在页面加载上
- 使用javascript将焦点集中在select中
- 如果已选择某个字段,则无法将焦点集中在该字段上
- 如何在加载页面时将焦点集中在特定选项卡上
- 将焦点集中在按下“escape”上;关键
- 放大镜-弹出窗口不允许其内部的弹出窗口集中焦点
- 将焦点集中在jQueryUI菜单项上,该菜单项具有比单击侦听器更宽的侦听器
- 使用jquery将焦点集中在文本框上
- 防止在上一个输入为空时将焦点集中在下一个输入上