Question

我正在使用Django-1.4.5。和JQuery和我有模板系统的问题：我有base.html脚本和JQuery函数，但当我尝试在另一个模板（扩展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时，我无法弄清楚为什么它不起作用。提前感谢您的回答。

Answer 1

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

也许你正在用模板中的{% block head %}{% endblock %}重写头文？

Answer 2

用

{% block head %}
{% endblock %}

您正在废弃head中base.html块中的所有内容。我猜您的base.html模板会封闭此块中的所有javascript源。

请忽略这两行。 <{1}}块将被继承。

将JQuery与Django base.html模板一起使用

2 个答案: