在引导导航选项卡中使用 ajax 加载 div

Question

在我的网站上，我使用引导导航选项卡。这很好用。我喜欢浏览器无需刷新或重新加载即可加载内容。 但是，我需要为其添加一个新功能。

想象一个包含大量产品/项目的网页。这可以通过导航选项卡显示。但是，我希望能够单击该项目产品，并且显示所有选项卡内容的容器将填充该产品信息。

我使用 ajax 制作了这样的结构（使用 ajax 加载的 html 文件加载选项卡内容）。但显然，当我单击其中一个导航选项卡时，它仍会显示 ajax 加载的文件而不是原始选项卡内容。

如何确保在此类产品信息页面上单击导航选项卡时，会显示导航选项卡内容？

提前致谢。

Answer 1

是的很简单，你只需要通过 ajax 来完成，然后点击这里我可以帮助你的虚拟代码： 为您的选项卡提供 id，以便您可以在这种情况下为每个选项卡捕获其点击 thn JSON，每个选项卡每个选项卡都有 3 个 JSON 用于三个选项卡

json文件虚拟：

    [
    {
    "image" :"image url",
    "cat" : "latest",
    "head" :"Without morning third,Fowl forth she'd."
    },
    {
    "image" :"image url",
    "cat" : "latest",
    "head" :"Without morning third,Fowl forth she'd."
    },
   {
    "image" :"image url",
    "cat" : "latest",
    "head" :"Without morning third,Fowl forth she'd."
    }
    ] 

那是你的 json 现在用 getJSON 获取它；

 $('#main').on('click',function(){

$.ajax({

    url:"main.json",
    dataType:"json",
beforeSend: function() {
    // setting a timeout
    $('.over').show()
},


    success:function(){
        $('#main_cont').empty();
            $.getJSON('main.json',function(maindata){
                $.each(maindata,function(i,value){
                    var main_data = '<li>' + '<img src="' + value.image +  '"/>' + '<span>' + value.cat + '</span>' + '<h3>' + value.head + '</h3>' + '</li>';
                $('#main_cont').append(main_data)
                })
            })
    },
complete: function() {
    // setting a timeout
    $('.over').hide()
},
    error:function(xhr,status,error){
        alert(xhr.status)
    }

})
})

希望这会有所帮助，如果您需要任何帮助，请回复。在上述模式上制作许多 json 并在 ajax 中使用它们