1. 首页
  2. 问答
  3. 标签内容不变

标签内容不变

2016-02-29 119 views
0

我想在一个页面中制作不同的标签页，所有页面都有不同的内容。但是，当我点击一个新标签时，身体没有变化。任何人有任何建议？它改变了页面，但每个页面的主体都是一样的，我不知道为什么。不知道这是如何在HTML中设置标签或需要用java更改的东西。任何帮助将非常感激。标签内容不变

<!DOCTYPE html> 
<html> 
<head> 
     <script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="./common/res.css"/> 
    <meta charset="utf-8"> 
    <title>Room Reservation</title> 
</head> 
<header> 
    <script type="text/javascript" src="./common/tab.js"></script> 
</header> 
<body> 
    <div class="tabs"> 
     <ul class="tab-links"> 
      <li class="active"><a href="#tab1">Stage</a></li> 
      <li><a href="#tab2">Studio</a></li> 
      <li><a href="#tab3">Session</a></li> 
     </ul> 

<div class="tab-content"> 
    <div id="tab1" class="tab active"> 
     <form> 
      Room Selection:<br> 
      <select name="room"> 
       <option value="">Select Room</option> 
       <option value="stage">Stage Access</option> 
       <option value="grip">Grip Closet</option> 
       <option value="grid">Grid</option> 
     </form> 
    </div> 
    <div id="tab2" class="tab"> 
     <p>Studio</p> 
    </div> 

    <div id="tab3" class="tab"> 
     <p>Session</p> 
    </div> 
</div> 
</div> 
<script> 
jQuery(document).ready(function() { 
    jQuery('.tabs .tab-links li').on('click', function(e) { 
    tabs(jQuery(this).attr('data-toggle')); 
    jQuery(this).addClass('active').siblings().removeClass('active'); 
    });` 

    function tabs(tab) { 
     jQuery('.tab-content .tab').hide() 
     jQuery('.tab-content').find(tab).show(); 
    } 
}); 
</script> 
</body> 
</html> 



/*----- Tabs -----*/ 
.tabs { 
width:100%; 
display:inline-block; 
} 

/*----- Tab Links -----*/ 
/* Clearfix */ 
.tab-links:after { 
    display:block; 
    clear:both; 
    content:''; 
} 

.tab-links li { 
    margin:0px 5px; 
    float:left; 
    list-style:none; 
} 

    .tab-links a { 
     padding:9px 15px; 
     display:inline-block; 
     border-radius:3px 3px 0px 0px; 
     background:#7FB5DA; 
     font-size:16px; 
     font-weight:600; 
     color:#4c4c4c; 
     transition:all linear 0.15s; 
    } 

    .tab-links a:hover { 
     background:#a7cce5; 
     text-decoration:none; 
    } 

li.active a, li.active a:hover { 
    background:#fff; 
    color:#4c4c4c; 
} 

/*----- Content of Tabs -----*/ 
.tab-content { 
    padding:15px; 
    border-radius:3px; 
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15); 
    background:#fff; 
} 

    .tab { 
     display:none; 
    } 

    .tab.active { 
     display:block; 
    }

来源

2016-02-29 R_Chin

+0