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

<?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>

コメントを残す

メールアドレスが公開されることはありません。