javascript ページ変更しないでタブを移動

| コメント(0)

<?php
     include(dirname(__FILE__) . "/../../../../check_login.php");
     include(dirname(__FILE__) . "/../../../../DBconnect.php");
?>
<!doctype html>
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" type="text/css" href="/quotations/css/style-inner.css" media="all" />
      <script type="text/javascript" src="/quotations/js/jquery.min.js"></script>
      <title>quotation</title>

<script type="text/javascript"><!--
function ChangeTab(tabname) {
   // 全部消す
   document.getElementById('tab1').style.display = 'none';
   document.getElementById('tab2').style.display = 'none';
   document.getElementById('tab3').style.display = 'none';
   // 指定箇所のみ表示
   document.getElementById(tabname).style.display = 'block';
}
// --></script>
<style type="text/css"><!--
/* 表示領域全体 */
div.tabbox {
   margin: 0px; padding: 0px; width: 950px;
}

/* タブ部分 */
p.tabs { margin: 0px; padding: 0px; }
p.tabs a {
   display: block; width: 5em; float: left;
   margin: 0px 1px 0px 0px; padding: 3px;
   text-align: center;
   border-radius: 12px 12px 0px 0px; /* 角を丸くする */
}
p.tabs a.tab1 { background-color: blue; color: white; }
p.tabs a.tab2 { background-color: #aaaa00; color:white;}
p.tabs a.tab3 { background-color: red; color: white; }
p.tabs a:hover { color: yellow; }

/* タブ中身のボックス */
div.tab { height: 700px; overflow: auto; clear: left; }
div#tab1 {
   border: 2px solid blue; background-color: #ccffff;
}
div#tab2 {
   border: 2px solid #aaaa00; background-color: #ffffcc;
}
div#tab3 {
   border: 2px solid red; background-color: #ffcccc;
}
div.tab p { margin: 0.5em; }
--></style>

</head>

<body>
<div id="header">
<nav id="menubar">
    <?php require("../member_menu.php"); ?>
</nav>

<div id="menu">
<a href="#" target="_self">予備</a>
<a href="#" target="_self">予備</a>
<a href="#" target="_self">予備</a>
</div>

</div>

<div id="container">
<div id="category1">

  <div class="tabbox">
     <p class="tabs">
        <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">最近一覧</a>
        <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">新規登録</a>
        <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">見積詳細</a>
     </p>
     <div id="tab1" class="tab">
        <p>(タブ1の中身。)</p>
     </div>
     <div id="tab2" class="tab">
        <p>(タブ2の中身。)</p>
     </div>
     <div id="tab3" class="tab">
        <p>(タブ3の中身。)</p>
     </div>
  </div>

  <script type="text/javascript"><!--
    // デフォルトのタブを選択
    ChangeTab('tab1');
  // --></script>

コメントする