私は ajax を使用して div 内にいくつかのコンテンツをロードしています。これには jQueryVericalTabs プラグインが含まれます。ただし、スタイルが機能せず、書式設定されていないテキストが表示されるだけです。
FF の Web 開発者ツールを使用すると、インデックス ページで正しく呼び出されているにもかかわらず、レンダリングされたソースが CSS ファイルのスタイルにリンクしていないことがわかります。CSS を index.php のコンテンツ ファイルに直接書き込んで、body タグ内に配置し、javascript を使用する場合と使用しない場合 (プラグインのデモによる)、およびこの投稿の提案も試みましたが、どれも機能しませんでした。他に試してみてください。ヘッダーは次のようになります。
<link rel="stylesheet" href="css/jquery-jvert-tabs-1.1.4.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-jvert-tabs-1.1.4.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$("#accordion").accordion({
active: false,
autoHeight: false,
collapsible: true
});
});
$("#vtabs5").jVertTabs({
equalHeights: true
});
// add click events for open tab buttons
$("input[id^=openTab]").each(function(index){
$(this).click(function(){
openTab("#vtabs6",index);
return false;
});
});
function openTab(tabId,index){
$(tabId).jVertTabs('selected',index);
}
});
別のプラグイン、verticalTabs を試してみましたが、タブ タイトルは正しい書式で表示されますが、タブ コンテンツは表示されません。私はまだ最初のプラグインを使用したいと思いますが、HTML はずっときれいです。
ご意見をお待ちしております。