将引导选项卡链接到服务器URL [英] Linking Bootstrap tabs to server urls

问题描述

看起来已经有很多讨论，但是我不能让我的代码工作。

我有一个Django项目和模板与Bootstrap选项卡。我正在尝试绑定tab菜单药片到我的Django项目的网址。而且我无法读取 Uncaught错误：客户端的语法错误，无法识别的表达式：/ employee_user_info / 40 / 错误。这是我的代码：

HTML：

 < div class = 容器 > 
< 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 =pillhref =＃home>标签1< / a>< / li> 
< li>< a data-toggle =pillhref ='/ employee_user_info / {{employee_unique_id}} /'>标签2< / a>< / li> 
< li>< a data-toggle =pillhref =＃menu2> Tab 3< / a>< / li> 
< / ul> 
 
< div class =tab-contentstyle =margin-top：2％> 
< div id =homeclass =tab-pane fade in active> 
< div class =container> 
<！ - 东西 - > 
< / div> 
< / div> 
< / div> 
  

Django urlconf

 code> url（r'^ employee_user_info /（？P< employee_unique_id> \d +）/ $'，employee_views.profile_user_info，name ='employee_user_info'），
  pre> 
 
 
 JS 
  var navpills = $（'。nav-丸）; 
 $（function（）{
 // click tab on click 
 navpills.on（'click'，'a'，function（e）{
 var $ this = $ （this）; 
 //防止默认行为
 e.preventDefault（）; 
 //将哈希发送到地址栏
 window.location.hash = $ this。 attr（'href'）; 
 //激活点击的标签
 $ this.tab（'show'）; //这里出现错误
}）; 
 
 $（window）.bind（'hashchange'，refreshHash）; 
 
 //从地址栏读取已显示
 if（window.location.hash）{
 //加载显示选项卡
 refreshHash（）; 
} 
}）; 
 function refreshHash（）{
 navpills.find（'a [href ='+ window.location.hash +']'）。tab（'show'）; 
} 
  
 更新： 
 
 
 
当我点击标签2时，客户端发生错误。 
 
 
 
 更新2  
 
 
 
当按Tab 2时，网址变为 http://127.0.0.1:8000/employee_profile_main/40/#/employee_user_info/40 / / code> 
我猜，降价在这里停止
解决方案
你不能设置 href  for  a  with  / 。我猜想它用作选择器。
 
Looks like there's been much discussion on this already, but I just can't get my code work.

I have a Django project and templates with Bootstrap tab pills. I am trying to bind tab menu pills to my Django project's urls. And I just can't get read of  Uncaught Error: Syntax error, unrecognized expression: /employee_user_info/40/ error on client side. Here's my code:

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');
    }
UPDATE:

The error happens on the client side when I click Tab 2. 

UPDATE 2

When pressing Tab 2, the url becomes http://127.0.0.1:8000/employee_profile_main/40/#/employee_user_info/40/
I guess, the buck stops here
解决方案
You can't set href for a with /. I am guessing that it used as selector.

                        
这篇关于将引导选项卡链接到服务器URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！