Django：根据'a'标签点击显示不同的列表

Question

[在我的Django网站中，我希望用户能够基于用户在'a'标签上的点击来选择显示两个不同的列表，一次显示但在同一页面上？希望有人能帮忙！如果不可能这样做，我是否可以通过其他方式实现它？我真的不知道该怎么改变。非常感谢！

views.py

class searchesView(TemplateView):
    template_name = "search/searches.html"

    def post(self, request, *args, **kwargs):
        print('FORM POSTED WITH {}'.format(request.POST['srh']))
        srch = request.POST.get('srh')
        if srch:
            sr = Info.objects.filter(Q(band__icontains=srch))
            sd = Info.objects.filter(Q(disco__icontains=srch))
            sp = Info.objects.filter(Q(band__icontains=srch) & Q(disco__icontains=srch))

            #if sr.exists() and sd.exists():
                #return render(self.request, 'search/searches.html')


        #else:
            paginator = Paginator(sr, 10)
            page_number = request.GET.get('page')
            page_obj = paginator.get_page(page_number)

            return render(self.request, 'search/searches.html', {'sr':sr,
                                                                       'sd': sd, 'sp':sp,
                                                                       'page_obj': page_obj
                                                                       })

        else:
            return render(self.request, 'search/searches.html')

模板：

    {% if sp %}
    <a href="{%url 'searches' sd%}" >Band: {{ request.POST.srh }}</a><br/>
    <a href="{%url 'searches'%}" >Album: {{ request.POST.srh }}</a>
    {% else %}

    {% if sd %}
    {% for y in sd %}
    <div class="container">

      <div class="album">

        {%if y.cover%}
        <img src= "{{y.cover.url}}" width="100%">
        {%endif%}
      </div>

      <div class="info">
        <table class="talbum" style="height:400px">
          <tr><th colspan="2"><h2>{{y.disco}}</h2></th></tr>
          <tr><td> Band: </td><td> {{y.band}} </td></tr>
          <tr><td> Anno: </td><td> {{y.anno}} </td></tr>
          <tr><td> Disco: </td><td> {{y.disco}} </td></tr>
          <tr><td> Etichetta: </td><td> {{y.etichetta_d}} </td></tr>
          <tr><td> Matrice: </td><td> {{y.matrice}} </td></tr>
        </table>

      </div>
    </div>
    {%endfor%}
    {%else%}


{% if sr %}
{% for k in sr %}
<div class="container_band">
  <div class=album_band>
    <!-- insert an image -->
    {%if k.cover%}
    <img src= "{{k.cover.url}}" width="100%">
    {%endif%}
  </div>

  <div class="info_band">
    <!-- insert table info -->
    <table>
      <tr><th><h2>{{k.band}}</h2></th></tr>
      <tr><td> Anno: </td><td> {{k.anno}} </td></tr>
      <tr><td> Disco: </td><td> {{k.disco}} </td></tr>
      <tr><td> Etichetta: </td><td> {{k.etichetta_d}} </td></tr>
      <tr><td> Matrice: </td><td> {{k.matrice}} </td></tr>
    </table>
  </div>
</div>
{%endfor%}


<div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; first</a>
            <a href="?page={{ page_obj.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">next</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
        {% endif %}
    </span>



{% else %}

<div class="container">
  <div class="message">
    No results for "{{ request.POST.srh }}"
  </div>
  <div class="immagine"
  </div>
</div>

{%endif%}
{%endif%}
{%endif%}

Answer 1

很好地显示和更改前端行为位于JavaScript领域。为了实现您想要的功能，您应该在要切换（隐藏/显示）的内容周围定义一个包装器，并为其指定一个html id。使用jQuery toggle使制作尽可能简单。要实现您想要的效果，最好不要使用“ a”标签，因为单击它会使您无法进入其他站点，您可以改用“按钮”。因此，附有示例的快速说明：

1. 根据某些动作（表单或表格等）定义要隐藏/显示的两个元素
2. 将包装器div中的每个元素包装起来，并为其指定id的>]

<div id="table"> whole table content </div>
<div> id="other_table"> another table content </div>

3. 定义一个按钮并为其指定一些ID

<button id="btn_toggle">On click toggle tables</button>

4. 在这样的模板定义脚本中

$( document ).ready(function() {
   // one of tables will be hidden on default
   $("#other_table").hide();
   $("#btn_toggle").click( function() {
      $("#other_table").toggle();
      $("#table").toggle();
    }

});

如果您需要更多信息，请询问。不要忘记在模板中包含jQuery