1

我正在使用 Django-1.4.5。和 JQuery，我的模板系统有问题：我有带有脚本和 JQuery 函数的 base.html，但是当我尝试在另一个模板（扩展 base.html）中使用选项卡时，它没有显示出来。这是我的base.html：

<head>
<meta charset="utf-8">
<link href="{{ STATIC_URL }}/css/custom-theme/jquery-ui-1.10.2.custom.css" rel="stylesheet">
<script src="{{ STATIC_URL }}/js/jquery-1.9.1.js"></script>
<script src="{{ STATIC_URL }}/js/jquery-ui-1.10.2.custom.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}/css/style.css" type="text/css" />
<script>
$(function() {
    $("#accordion1").accordion({
        heightStyle: "content",
    });
    $('#accordion2').accordion({
        heightStyle: "content",
    })
    $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $("#tabs-li").removeClass("ui-corner-top").addClass("ui-corner-left");
});

还有我的另一个模板：

{% extends "base.html" %}
{% block title %}{% endblock %}
{% block head %}
{% endblock %}
{% block content %}
<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
        <li><a href="#tab4">Tab 4</a></li>
        <li><a href="#tab5">Tab 5</a></li>
    </ul>
    <div id="tab1"><p>Text 1</p></div>
    <div id="tab2"><p>Text 2</p></div> 
    <div id="tab3"><p>Text 3</p></div>
    <div id="tab4"><p>Text 4</p></div>
    <div id="tab5"><p>Text 5</p></div>
</div>
{% endblock %}

当我在 base.html 中切换选项卡时，它可以正常工作。我无法弄清楚为什么当我扩展 base.html 时它不起作用。提前感谢您的回答。

4

2 回答 2

0

我在你的 base.html 中看不到{% block content %}{% endblock %}，你能写吗？

{% block head %}{% endblock %}也许您正在模板中重新编写头部？

于 2013-05-08T12:34:16.277 回答
0

和

{% block head %}
{% endblock %}

您正在head丢弃base.html. 我猜你的base.html模板在这个块中包含了所有的 javascript 源。

只需省略这两行。该head块将被继承。

于 2013-05-08T12:34:25.890 回答