如何从选项卡外部的链接打开jquery选项卡? [英] How to open a jquery tab from a link that is outside the tab?
本文介绍了如何从选项卡外部的链接打开jquery选项卡?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我找到了一个不错的标签系统(网站
HTML代码:
<div id="tabs">
<ul>
<li><a class="active" href="#tab1">HOME</a></li>
<li><a href="#tab2">SERVICES</a></li>
<li><a href="#tab3">OPTIONS</a></li>
<li><a href="#tab4">ABOUT US</a></li>
<li><a href="#tab5">CONTACT US</a></li>
</ul><!-- //Tab buttons -->
<div class="tabDetails">
<div id="tab1" class="tabContents">
<h1>Title1</h1>
<iframe src="Home.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab1 -->
<div id="tab2" class="tabContents">
<h1>Title2 </h1>
<h2> </h2>
<h3> </h3>
<iframe src="Services.html" width="1150" height="640" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab2 -->
<div id="tab3" class="tabContents">
<h1>Title3</h1>
<iframe src="Options.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab3 -->
<div id="tab4" class="tabContents">
<h1>Title4 </h1>
<iframe src="Aboutus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab4 -->
<div id="tab5" class="tabContents">
<h1>Title5</h1>
<iframe src="Contactus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab5 -->
</div><!-- //tab Details -->
</div><!-- //Tab Container -->
CSS:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tab</title>
<style type="text/css">
*{margin:10; padding:0;}
body{
font:normal 14px/1.5em Arial, Helvetica, sans-serif;
}
a{outline:none;}
#tabs{
background:#f0f0f0;
border:1x solid #fff;
margin:100px auto;
padding:20px;
position:absolute;
width:1315px;
}
#tabs ul{
overflow:hidden;
border-left:0px solid #fff;
height:80px;
position:center;
z-index:100;
}
#tabContaier li{
float:left;
list-style:none;
}
#tabs li a{
background:#ddd;
border:3px solid #ffff;
border-left:0;
color:#666;
cursor:pointer;
display:block;
height:35px;
line-height:35px;
padding:0 98px;
text-decoration:none;
text-transform:bold;
}
#tabs li a:hover{
background:#fff;
}
#tabs li a.active{
background:#fbfbfb;
border:px solid #fff;
border-right:px;
color:#333;
}
.tabDetails{
background:#fbfbfb;
border:1px solid #fff;
margin:34px px;
}
.tabContents{
padding:px
}
.tabContents h1{
font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
padding:0 0 px;
width:auto;
</style>
JAVASCRIPT代码:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( ".selector" ).tabs( "refresh" );
// Hide all tab conten divs by default
$(".tabContents").hide();
// Show the first div of tab content by default
$(".tabContents:first").show();
//Fire the click event
$("#tabContaier ul li a").click(function(){
// Catch the click link
var activeTab = $(this).attr("href");
// Remove pre-highlighted link
$("#tabContaier ul li a").removeClass("active");
// set clicked link to highlight state
$(this).addClass("active");
// hide currently visible tab content div
$(".tabContents").hide();
// show the target tab content div by matching clicked link.
$(activeTab).fadeIn();
return false;
});
});
</script>
解决方案
您的问题是您正在选择带有其他jquery选项卡的选项卡.使用此Javascript函数可以更改选定的标签.
function selectTab(tabIndex) {
var selector = "a[href='#tab" + tabIndex + "']";
var tab = "#tab" + tabIndex;
$("#tabContaier ul li a").removeClass("active");
$(selector).addClass("active");
$(".tabContents").hide();
$(tab).fadeIn();
}
链接:
<a href="#" onclick="selectTab(2);" >Go to tab 2</a>
如果您使用与现在使用的相同的链接命名法(对于链接为"tab1，tab2"等的href，以及名为"tab1，tab2"的div的href，则...)将起作用. 祝你好运.
I have found a nice tabs system (link to the tab system) on the internet to let the users navigate through my website. However I am not that good in coding. I have somehow managed to get things working.
I am trying/ tweaking for two days to get it working. Recording to this code I would be able to make a link that will open a specified tab. How could you make a link that -when clicked on it- would open the specified tab.
This code will do the trick but do not know how to implement this code in my existing Javascript code.
CODE:
var $tabs = $('#example').tabs(); // first tab selected
$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});
Found this code at this website
HTML CODE:
<div id="tabs">
<ul>
<li><a class="active" href="#tab1">HOME</a></li>
<li><a href="#tab2">SERVICES</a></li>
<li><a href="#tab3">OPTIONS</a></li>
<li><a href="#tab4">ABOUT US</a></li>
<li><a href="#tab5">CONTACT US</a></li>
</ul><!-- //Tab buttons -->
<div class="tabDetails">
<div id="tab1" class="tabContents">
<h1>Title1</h1>
<iframe src="Home.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab1 -->
<div id="tab2" class="tabContents">
<h1>Title2 </h1>
<h2> </h2>
<h3> </h3>
<iframe src="Services.html" width="1150" height="640" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab2 -->
<div id="tab3" class="tabContents">
<h1>Title3</h1>
<iframe src="Options.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab3 -->
<div id="tab4" class="tabContents">
<h1>Title4 </h1>
<iframe src="Aboutus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab4 -->
<div id="tab5" class="tabContents">
<h1>Title5</h1>
<iframe src="Contactus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab5 -->
</div><!-- //tab Details -->
</div><!-- //Tab Container -->
CSS:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tab</title>
<style type="text/css">
*{margin:10; padding:0;}
body{
font:normal 14px/1.5em Arial, Helvetica, sans-serif;
}
a{outline:none;}
#tabs{
background:#f0f0f0;
border:1x solid #fff;
margin:100px auto;
padding:20px;
position:absolute;
width:1315px;
}
#tabs ul{
overflow:hidden;
border-left:0px solid #fff;
height:80px;
position:center;
z-index:100;
}
#tabContaier li{
float:left;
list-style:none;
}
#tabs li a{
background:#ddd;
border:3px solid #ffff;
border-left:0;
color:#666;
cursor:pointer;
display:block;
height:35px;
line-height:35px;
padding:0 98px;
text-decoration:none;
text-transform:bold;
}
#tabs li a:hover{
background:#fff;
}
#tabs li a.active{
background:#fbfbfb;
border:px solid #fff;
border-right:px;
color:#333;
}
.tabDetails{
background:#fbfbfb;
border:1px solid #fff;
margin:34px px;
}
.tabContents{
padding:px
}
.tabContents h1{
font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
padding:0 0 px;
width:auto;
</style>
JAVASCRIPT CODE:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( ".selector" ).tabs( "refresh" );
// Hide all tab conten divs by default
$(".tabContents").hide();
// Show the first div of tab content by default
$(".tabContents:first").show();
//Fire the click event
$("#tabContaier ul li a").click(function(){
// Catch the click link
var activeTab = $(this).attr("href");
// Remove pre-highlighted link
$("#tabContaier ul li a").removeClass("active");
// set clicked link to highlight state
$(this).addClass("active");
// hide currently visible tab content div
$(".tabContents").hide();
// show the target tab content div by matching clicked link.
$(activeTab).fadeIn();
return false;
});
});
</script>
解决方案
Your problem was you were selecting the tab with a different jquery tab. Use this Javascript function to change the selected tab.
function selectTab(tabIndex) {
var selector = "a[href='#tab" + tabIndex + "']";
var tab = "#tab" + tabIndex;
$("#tabContaier ul li a").removeClass("active");
$(selector).addClass("active");
$(".tabContents").hide();
$(tab).fadeIn();
}
Link:
<a href="#" onclick="selectTab(2);" >Go to tab 2</a>
This will work if you use the same link nomenclature as you are using now (href for links as "tab1, tab2" etc, and the divs named "tab1, tab2" etc... Good luck.
这篇关于如何从选项卡外部的链接打开jquery选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
