개발 Q&A

제목 탭뷰를 만드는 중인데 선택된 탭이 부각되게 하려고해요.
글쓴이 낚시군 작성시각 2013/05/04 23:26:22
댓글 : 0 추천 : 0 스크랩 : 0 조회수 : 14647   RSS
 지금 탭을 여러개 만들어서 태브를 클릭할때마다 그 페지자체가 redirect되면서 선택된 탭아이콘이 부각되게 하려고 해요.
지금 만들고 있는 소스를 올립니다. 한번 봐주세요. 부탁드립니다.

<?php 
header('Content-Type:text/html; charset = utf-8');
if (isset($_REQUEST['tab'])) {
$tab = $_REQUEST['tab'];
} else {
$tab = 0;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Simple Login with CodeIgniter - Private Area</title>
<style type="text/css">
/*Credits: Vijit Patil */
.tab_content
{
border:3px solid black;
width:100%;
height:600px;
}
div#topheader
{
text-align:right;
margin-right:30px;
}
div#tabbar
{
width:80%;
margin:auto;
text-align:center;
}
.tabZ{
position:relative;
width:100%;
padding: 3px 0;
font: bold 16px Trebuchet MS ;
text-align: center;
border-bottom: 2px solid black;
list-style-type: none;
 
}
 
.tabZ li{
display: inline;
margin: 0;
width:13em;
}
.tabZ li a{
text-decoration: none;
padding: 0px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #00ff00;
color: #2d2b2b;
}
.tabZ li a:visited{
color: #2d2b2b;
}
.tabZ li a:hover{
background-color: #FF8AFF;
color: black;
}
.tabZ li a:active{
color: black;
}
.tabZ li.selected a{/*selected tab*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #00ffff;
color: black;
}
</style>
  </head>
  <body>
  <div id="topheader"><h2>欢迎 <?php echo $username; ?>!</h2>
    <a href="home/logout">Logout</a>
</div>
    <p> </p>
<div id="tabbar">
<?php
switch ($tab) {
case 1: //Manage User Tab1
?>
<ul class="tabZ">
<li><a href="manageorders" target="targetframe">订单管理</a></li>
<li class="selected"><a href="managelottery" target="targetframe">中将管理</a></li>
<li><a href="manageusers" target="targetframe">用户管理</a></li>
<li><a href="managenews" target="targetframe">新闻管理</a></li>
<li><a href="settings" target="targetframe">设置</a></li>
</ul>
<iframe id="targetframe" class="tab_content" >
</iframe>
 
<?php 
break;
case 2: // Manage User Tab2
?>
<ul class="tabZ">
<li><a href="manageorders" target="targetframe">订单管理</a></li>
<li><a href="managelottery" target="targetframe">中将管理</a></li>
<li class="selected"><a href="manageusers" target="targetframe">用户管理</a></li>
<li><a href="managenews" target="targetframe">新闻管理</a></li>
<li><a href="settings" target="targetframe">设置</a></li>
</ul>
<iframe id="targetframe" class="tab_content" >
</iframe>
<?php 
break;
case 3: // Manage User Tab2
?>
<ul class="tabZ">
<li><a href="manageorders" target="targetframe">订单管理</a></li>
<li><a href="managelottery" target="targetframe">中将管理</a></li>
<li><a href="manageusers" target="targetframe">用户管理</a></li>
<li class="selected"><a href="managenews" target="targetframe">新闻管理</a></li>
<li><a href="settings" target="targetframe">设置</a></li>
</ul>
<iframe id="targetframe" class="tab_content" >
</iframe>
<?php 
break;
case 4: // Manage User Tab2
?>
<ul class="tabZ">
<li><a href="manageorders" target="targetframe">订单管理</a></li>
<li><a href="managelottery" target="targetframe">中将管理</a></li>
<li><a href="manageusers" target="targetframe">用户管理</a></li>
<li><a href="managenews" target="targetframe">新闻管理</a></li>
<li class="selected"><a href="settings" target="targetframe">设置</a></li>
</ul>
<iframe id="targetframe" class="tab_content" >
</iframe>
<?php
break;
default: // Manage User TabDefault
?>
<ul class="tabZ">
<li class="selected"><a href="manageorders" target="targetframe">订单管理</a></li>
<li><a href="managelottery" target="targetframe">中将管理</a></li>
<li><a href="manageusers" target="targetframe">用户管理</a></li>
<li><a href="managenews" target="targetframe">新闻管理</a></li>
<li><a href="settings" target="targetframe">设置</a></li>
</ul>
<iframe id="targetframe" class="tab_content" >
</iframe>
<?php 
break;
}
?>
</div>
  </body>
</html>
 
 다음글 ID 중복 체크 문제요~ (3)
 이전글 SSL 인증서 발급 문의 (3)

댓글

없음