Javascript 如何在基于tab的nav上设置活动类并从数据库中获取数据

在这里，我有一个基于选项卡的导航栏，我想在有人单击选项卡时激活类功能

例如，让我们单击第二个选项卡，它应该是活动的，并在单击时从URL获取数据

这里的问题是在我的代码中-当我点击第二个选项卡时，类显示为活动，但内容没有显示

你们能不能建议一个从数据库中动态呈现数据的解决方案，并在我点击该选项卡时将活动类设置为该选项卡

 <div class="box-header">
                <ul class="nav nav-tabs">
                    <li class="active" ><a href="/delhi/list_sudents">Delhi</a></li>
                    <li><a href="mumbai/list_sudents">Mumbai</a></li>
                </ul>
            </div>

<script>
$(document).ready(function () {
    $('.nav li a').click(function(e) {

        $('.nav li.active').removeClass('active');

        var $parent = $(this).parent();
        $parent.addClass('active');
        e.preventDefault();
    });
});
/script>

$（文档）.ready（函数（）{
$（'.nav li a'）。单击（函数（e）{
$（'.nav li.active'）.removeClass（'active'）；
var$parent=$（this.parent（）；
$parent.addClass（'active'）；
e、 预防默认值（）；
});
});
/脚本>

请参阅此。您可以使用类似于此小提琴的数据属性

JS代码：

$(document).ready(function () {
    $('.nav li').click(function(e) {
       var $_this = $(this)
       $('.nav li').removeClass('active');
            $_this.addClass("active");
            var url = $_this.attr("data-url");
            var data = {} //your post data
            $.ajax({
                method: "POST",
                url: "some.php",
                data: { name: "John", location: "Boston" }
            })
            .done(function( msg ) {
                // Do somthing with your data
            });
       e.preventDefault();
   });
});

HTML:

孟买


德里

---

我想你是在特定选项卡处于活动状态时试图从数据库检索数据，我说得对吗？请共享完整的html代码，在我的案例中，重定向到URL不起作用，我希望与图像中所附的布局相同。但它改变了布局。我没弄明白你。。。实际上，在单击时，我希望该类处于活动状态，它应该调用Django视图来动态呈现相应的模板。

<ul class="nav nav-tabs">
 <li class="nav-item active">
  <a class="nav-link" data-url="/delhi/list_sudents">Mumbai</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" data-url="/delhi/list_sudents">Delhi</a>
 </li>