ユーザーが私のウェブサイトをナビゲートできるように、インターネット上で素敵なタブ システム (タブ システムへのリンク) を見つけました。しかし、私はコーディングが得意ではありません。私は何とか物事を機能させることができました。
私はそれを機能させるために2日間試行/調整しています。このコードに記録すると、指定したタブを開くリンクを作成できます。クリックすると指定したタブが開くリンクを作成するにはどうすればよいでしょうか。
このコードはうまくいきますが、既存の Javascript コードにこのコードを実装する方法がわかりません。
コード：
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;
});
このウェブサイトでこのコードを見つけました
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>
ジャバスクリプトコード:
<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>