将引导选项卡链接到服务器 url

Posted 2023-05-09

【中文标题】将引导选项卡链接到服务器 url

【英文标题】：Linking Bootstrap tabs to server urls

【发布时间】：2016-10-03 13:44:55

【问题描述】：

似乎已经对此进行了很多讨论，但我的代码无法正常工作。

我有一个 Django 项目和带有 Bootstrap 选项卡的模板。我正在尝试将选项卡菜单药丸绑定到我的 Django 项目的网址。而且我只是无法阅读客户端的Uncaught Error: Syntax error, unrecognized expression: /employee_user_info/40/ 错误。这是我的代码：

html：

<div class="container">
        <h2>person_details_form.second_nm_rus.value person_details_form.first_nm_rus.value person_details_form.middle_nm_rus.value</h2>
        <ul class="nav nav-pills">
            <li class="active"><a data-toggle="pill" href="#home">Tab 1</a></li>
            <li><a data-toggle="pill" href='/employee_user_info/employee_unique_id/'>Tab 2</a></li>
            <li><a data-toggle="pill" href="#menu2">Tab 3</a></li>
        </ul>

        <div class="tab-content" style="margin-top:2%">
            <div id="home" class="tab-pane fade in active">
                <div class="container">
                    <!-- Something -->
                </div>
            </div>
        </div>

Django urlconf

 url(r'^employee_user_info/(?P<employee_unique_id>\d+)/$',employee_views.profile_user_info, name ='employee_user_info'),

JS

var navpills = $('.nav-pills');
$(function () 
    // activate tab on click
    navpills.on('click', 'a', function (e) 
      var $this = $(this);
      // prevent the Default behavior
      e.preventDefault();
      // send the hash to the address bar
      window.location.hash = $this.attr('href');
      // activate the clicked tab
      $this.tab('show'); // The error arises here
    );

    $(window).bind('hashchange', refreshHash);

    // read has from address bar and show it
    if(window.location.hash) 
      // show tab on load
      refreshHash();
    
);
function refreshHash() 
      navpills.find('a[href="'+window.location.hash+'"]').tab('show');
    

更新：

当我点击Tab 2时，错误发生在客户端。

更新 2

当按 Tab 2 时，url 变为http://127.0.0.1:8000/employee_profile_main/40/#/employee_user_info/40/ 我想，降压到此为止了

【问题讨论】：

您需要提供更多上下文。该错误到底发生在哪里？

否，请提供浏览器报告的错误上下文。它发生在哪一行？

我在该行旁边添加了评论

【参考方案1】：

您不能将href 设置为a 和/。我猜它用作选择器。

【讨论】：

我已经尝试过 href='employee_user_info/employee_unique_id/' 和 href='/employee_user_info/employee_unique_id/' 甚至 href='#employee_user_info/employee_unique_id /' :)

@EdgarNavasardyan, я написал, что вы не можете использовать / в href, т.к。 в bootstrap используется в качестве селектора。 （您不能在href 中使用/。引导程序使用href 作为选择器）

Приятно) впервые пишу здесь по-русски。 Не могли бы уточнить, я просто новичёк в этом。 Можете написать сам код ?