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

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

jquery django

将JQuery与Django base.html模板一起使用,jquery,django,Jquery,Django,我正在使用Django-1.4.5。而JQuery和我在模板系统方面有问题：我有base.html脚本和JQuery函数，但当我尝试在另一个模板（扩展了base.html）中使用选项卡时，它没有显示出来。以下是my base.html： <head> <meta charset="utf-8"> <link href="{{ STATIC_URL }}/css/custom-theme/jquery-ui-1.10.2.custom.css" rel="styles

我正在使用Django-1.4.5。而JQuery和我在模板系统方面有问题：我有base.html脚本和JQuery函数，但当我尝试在另一个模板（扩展了base.html）中使用选项卡时，它没有显示出来。以下是my 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");
});


$（函数（）{
美元（“#手风琴1”）。手风琴({
高度样式：“内容”，
});
$（'手风琴2'）。手风琴({
高度样式：“内容”，
})
$（“#制表符”）.tabs（）.addClass（“ui制表符垂直ui辅助程序clearfix”）；
$（“#tabs li”）.removeClass（“ui角顶部”）.addClass（“ui角左侧”）；
});

还有我的另一个模板：

{% 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 %}

{%extends“base.html”%}
{%block title%}{%endblock%}
{%block head%}
{%endblock%}
{%block content%}







文本1
正文2
文本3
文本4
文本5
{%endblock%}

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

我看不到base.html中的

{%block content%}{%endblock%}

，您能写吗

可能您正在使用模板中的

{%block head%}{%endblock%}

重新编写头？

使用

{% block head %}
{% endblock %}

您正在破坏

base.html

中

头

块中的所有内容。我猜您的

base.html

模板在这个块中包含了所有javascript源代码

把这两行删掉。

head

块将被继承。

我建议使用应用程序使用

static

模板标记，而不是

{{static\u URL}}

，后者灵活性较差。请详细说明“它不起作用”。根本没有尸体？只是Javascript/jQuery没有将这个div转换成选项卡？页面来源是否符合您的期望？浏览器中有Javascript控制台错误吗？有Django的错误吗？你有没有找到解决这个问题的办法？我正在使用django，jquery使用基本模板，出于某种奇怪的原因，它使用index.html模板。但是jquery代码在扩展base.html templateNo的其他页面中不起作用，我已经尝试过了。结果是相同的，有或没有头块。我在base.html中的内容在标记中（我有两个手风琴），脚本在标记中。我只在另一个模板中使用{%block content%}{%endblock%}，正如您所看到的，它是空的。@Gogo在您的问题中包含的base.html模板中没有

content

block。在扩展它的模板中定义一个将不起作用。