jsp/jstl を使用して Spring MVC Web アプリケーションをテンプレート化するために SiteMesh を使用しています。一部のページでタブを作成する必要がありますが、ページに CSS コードを挿入しようとすると機能しません。テンプレート間の競合が原因である可能性があります。 css とページ css.
これは私のタブページのコードです:
CSS
<style type="text/css">
#tabs {
border:1px solid #ccc;
height:28px; background:#eff5f9;
padding-left: 40px;
padding-top:45px;
-moz-box-shadow: inset 0 -2px 2px #dadada;
-webkit-box-shadow:inset 0 -2px 2px #dadada;
box-shadow: inset 0 -2px 2px #dadada;
border-top-left-radius:4px;
border-top-right-radius:4px; }
#tabs li { float:left; list-style:none;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
margin-right:5px;
border-top-left-radius:3px;
border-top-right-radius:3px;
-moz-box-shadow: 0 -2px 2px #dadada;
-webkit-box-shadow: 0 -2px 2px #dadada;
box-shadow: 0 -2px 2px #dadada; }
#tabs li a {
font-family:Arial, Helvetica, sans-serif;
font-size:13px; font-weight:bold;
color:#000000; padding:7px 14px 6px 12px;
display:block; background:#FFFFFF;
border-top-left-radius:3px; border-top-right-radius:3px;
text-decoration:none;
background: -moz-linear-gradient(top, #ebebeb, white 10%);
background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white));
border-top: 1px solid white;
text-shadow:-1px -1px 0 #fff;
outline:none; }
</style>
HTML
<body>
<ul id="tabs">
<li><a href="#tab1">Files and Folders</a></li>
<li><a href="#tab2">User Profiles</a></li>
<li><a href="#tab3">Contacts</a></li>
<li><a href="#tab4">Applications</a></li>
<li><a href="#tab5">Monthly Cost</a></li>
</ul>
<div class="container" id="tab1"> ...content goes here </div>
<div class="container" id="tab2"> ...content goes here </div>
<div class="container" id="tab3"> ...content goes here </div>
<div class="container" id="tab4"> ...content goes here </div>
<div class="container" id="tab5"> ...content goes here </div>
</body>
</html>
ページを単一の html ページとして実行しようとしましたが、動作しますが、アプリ内では動作しません。
助けてくれてありがとう。