Python Django和Bootstrap：知道哪个选项卡处于活动状态
一般网络开发新手在这里。我的背景是Java，但最近我一直在玩Django+Bootstrap网站 我目前正在做一个有趣的小项目，但遇到了一个问题，关于我希望引导中的选项卡如何工作 这里的上下文是，用户可以使用这些Django生成的表单记录他们完成的训练。星期几是页面顶部的选项卡 如何知道服务器端的哪个选项卡处于活动状态，以便将训练正确提交到数据库中的正确位置？ 显而易见的解决方案是制作7种不同的表单，但必须有一个更好的解决方案，我是个新手，看不到 这是我的html正文：Python Django和Bootstrap：知道哪个选项卡处于活动状态,python,html,django,twitter-bootstrap,Python,Html,Django,Twitter Bootstrap,一般网络开发新手在这里。我的背景是Java，但最近我一直在玩Django+Bootstrap网站 我目前正在做一个有趣的小项目，但遇到了一个问题，关于我希望引导中的选项卡如何工作 这里的上下文是，用户可以使用这些Django生成的表单记录他们完成的训练。星期几是页面顶部的选项卡 如何知道服务器端的哪个选项卡处于活动状态，以便将训练正确提交到数据库中的正确位置？ 显而易见的解决方案是制作7种不同的表单，但必须有一个更好的解决方案，我是个新手，看不到 这是我的html正文： <body
<body>
<div class ="container-fluid">
<div class = "span8 offset4">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#Mon" data-toggle="tab"><h3>Mon</h3></a></li>
<li><a href="#Tues" data-toggle="tab"><h3>Tues</h3></a></li>
<li><a href="#Wed" data-toggle="tab"><h3>Wed</h3></a></li>
<li><a href="#Thu" data-toggle="tab"><h3>Thu</h3></a></li>
<li><a href="#Fri" data-toggle="tab"><h3>Fri</h3></a></li>
<li><a href="#Sat" data-toggle="tab"><h3>Sat</h3></a></li>
<li><a href="#Sun" data-toggle="tab"><h3>Sun</h3></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active " id="Mon">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseWarmup">
<h2>Warmup</h2> </a>
</div>
<div id="collapseWarmup" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Sets</th>
<th>Reps</th>
<th>Distance</th>
<th>Intensity</th>
</tr>
</thead>
<tbody>
{% for exercise in mon.warmup.all %}
<tr>
<td>{{ exercise.name }} </td>
{% if exercise.sets %}
<td>{{ exercise.sets }} </td>
{% else %}
<td> </td>
{% endif %}
{% if exercise.reps %}
<td>{{ exercise.reps }} </td>
{% else %}
<td> </td>
{% endif %}
{% if exercise.distance %}
<td>{{ exercise.distance }}m </td>
{% else %}
<td> </td>
{% endif %}
{% if exercise.intensity %}
<td>{{ exercise.intensity }}</td>
{% else %}
<td> </td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
<form name="warmupform" class="well form-inline" action="{% url editworkout %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>{{ warmupform.as_p }}
</p>
<p><button type="submit" name="warmupsubmit" class="btn btn-primary">Submit Workout</button></p>
</form>
</div> <!-- accordian inner -->
</div> <!-- collapseone -->
</div> <!-- accordian group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseWorkout">
<h2>Workout</h2> </a>
</div>
<div id="collapseWorkout" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Sets</th>
<th>Reps</th>
<th>Distance</th>
<th>Intensity</th>
</tr>
</thead>
<tbody>
{% for exercise in mon.intervalworkout.all %}
<tr>
<td>{{ exercise.name }} </td>
{% if exercise.sets %}
<td>{{ exercise.sets }} </td>
{% else %}
<td> </td>
{% endif %}
{% if exercise.reps %}
<td>{{ exercise.reps }} </td>
{% else %}
<td> </td>
{% endif %}
{% if exercise.distance %}
<td>{{ exercise.distance }}m </td>
{% else %}
<td> </td>
{% endif %}
{% if exercise.intensity %}
<td>{{ exercise.intensity }}</td>
{% else %}
<td> </td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
<form name="intervalform" class="well form-inline" action="{% url editworkout %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>{{ intervalform.as_p }}
</p>
<p><button type="submit" name="intervalsubmit" class="btn btn-primary">Submit Workout</button></p>
</form>
</div> <!-- accordian inner -->
</div> <!-- collapseone -->
</div> <!-- accordian group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseWeights">
<h2>Strength Training</h2> </a>
</div>
<div id="collapseWeights" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Sets</th>
<th>Reps</th>
<th>Intensity</th>
</tr>
</thead>
<tbody>
{% for exercise in mon.strengthtraining.all %}
<tr>
<td>{{ exercise.name }} </td>
{% if exercise.sets %}
<td>{{ exercise.sets }} </td>
{% else %}
<td> </td>
{% endif %}
{% if exercise.reps %}
<td>{{ exercise.reps }} </td>
{% else %}
<td> </td>
{% endif %}
{% if exercise.intensity %}
<td>{{ exercise.intensity }}</td>
{% else %}
<td> </td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
<form name="strengthtrainingform" class="well form-inline" action="{% url editworkout %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>{{ strengthform.as_p }}
</p>
<p><button type="submit" name="strengthtrainingsubmit" class="btn btn-primary">Submit Workout</button></p>
</form>
</div> <!-- accordian inner -->
</div> <!-- collapseone -->
</div> <!-- accordian group -->
</div> <!-- accordian 2 -->
</div><!-- tabpane -->
<div class="tab-pane fade in " id="Tues">PROFILE ... Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, </div>
<div class="tab-pane fade in " id="Wed">MESSAGES ... Aliquip placeat salvia cillum iphone. </div>
<div class="tab-pane fade in " id="Thu">SETTING ... Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
<div class="tab-pane fade in " id="Fri">PROFILE ... Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, </div>
<div class="tab-pane fade in " id="Sat">MESSAGES ... Aliquip placeat salvia cillum iphone. </div>
<div class="tab-pane fade in " id="Sun">SETTING ... Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
</div><!-- tabcontent -->
</div> <!-- span6 -->
</div> <!-- container fluid -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="{{ STATIC_URL }}Bootstrap/js/bootstrap.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#myTab a').click(function(e) {
e.preventDefault();
$(this).tab('show');
})
$('#myTab a:first').tab('show');
});//]]>
</script>
</body>
在服务器端您无法知道，除非您的javascript告诉您（已解决）。这是因为浏览器不会在页面焦点上向后端发送更多信息，因此您将在服务器端被蒙在鼓里。您可以在表单中添加一个隐藏字段来标识您正在提交的选项卡/表单，或者您可以为每个表单提交不同的URL。
<ul id="myTab" class="nav nav-tabs">
<li {%if day == "monday"%} class="active"{%endif%}><a href="#Mon" data-toggle="tab"><h3>Mon</h3></a></li>
<li{%if day == "tuesday"%} class="active"{%endif%}><a href="#Tues" data-toggle="tab"><h3>Tues</h3></a></li>
<li {%if day == "wednesday"%} class="active"{%endif%}><a href="#Wed" data-toggle="tab"><h3>Wed</h3></a></li>
.
.
.
</ul>
非常感谢。这就是我需要的。我在{%url editworkout%}后面加上天数，然后在我的视图中使用request.get_full_path（）griasquid处理它，到目前为止，你对bootstrap+django组合的体验如何？在开始之前听听别人的反馈会很好
<ul id="myTab" class="nav nav-tabs">
<li {%if day == "monday"%} class="active"{%endif%}><a href="#Mon" data-toggle="tab"><h3>Mon</h3></a></li>
<li{%if day == "tuesday"%} class="active"{%endif%}><a href="#Tues" data-toggle="tab"><h3>Tues</h3></a></li>
<li {%if day == "wednesday"%} class="active"{%endif%}><a href="#Wed" data-toggle="tab"><h3>Wed</h3></a></li>
.
.
.
</ul>