Question

I have a main folder with index.html file for my html app. I have written a code in index.html of main folder to access the file (index.html) present in the sub folder as follows,

<a href="subfolder/index.html">SubFile</a>

When i click on the above link, it is not navigating to the subfile and instead the link of main folder index.html file changes to mainfolder/index.html#!/subfolder/index.html

I even tried changing the name of subfolder file but no success. What could be the problem?

I also want to navigate back to the main folder index.html from subfolder as follow,

<a href="../index.html">Mainfile</a>

But it is also not working. How can I achieve this as well?

Edited:

The file my-app.js is creating the issue. The code of my-app.js is as follows,

    // Initialize your app
var myApp = new Framework7({
    animateNavBackIcon: true,
    // Enable templates auto precompilation
    precompileTemplates: true,
    // Enabled pages rendering using Template7
    swipeBackPage: false,
    swipeBackPageThreshold: 1,
    swipePanel: "left",
    swipePanelCloseOpposite: true,
    pushState: true,
    pushStateRoot: undefined,
    pushStateNoAnimation: false,
    pushStateSeparator: '#!/',
    template7Pages: true
});


// Export selectors engine
var $$ = Dom7;

// Add main View
var mainView = myApp.addView('.view-main', {
    // Enable dynamic Navbar
    dynamicNavbar: false
});


$$(document).on('pageInit', function (e) {
        $(".swipebox").swipebox();


    $("#ContactForm").validate({
    submitHandler: function(form) {
    ajaxContact(form);
    return false;
    }
    });

    $('a.backbutton').click(function(){
        parent.history.back();
        return false;
    });


    $(".posts li").hide();  
    size_li = $(".posts li").size();
    x=4;
    $('.posts li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+1 <= size_li) ? x+1 : size_li;
        $('.posts li:lt('+x+')').show();
        if(x == size_li){
            $('#loadMore').hide();
            $('#showLess').show();
        }
    });


$("a.switcher").bind("click", function(e){
    e.preventDefault();

    var theid = $(this).attr("id");
    var theproducts = $("ul#photoslist");
    var classNames = $(this).attr('class').split(' ');


    if($(this).hasClass("active")) {
        // if currently clicked button has the active class
        // then we do nothing!
        return false;
    } else {
        // otherwise we are clicking on the inactive button
        // and in the process of switching views!

        if(theid == "view13") {
            $(this).addClass("active");
            $("#view11").removeClass("active");
            $("#view11").children("img").attr("src","images/switch_11.png");

            $("#view12").removeClass("active");
            $("#view12").children("img").attr("src","images/switch_12.png");

            var theimg = $(this).children("img");
            theimg.attr("src","images/switch_13_active.png");

            // remove the list class and change to grid
            theproducts.removeClass("photo_gallery_11");
            theproducts.removeClass("photo_gallery_12");
            theproducts.addClass("photo_gallery_13");

        }

        else if(theid == "view12") {
            $(this).addClass("active");
            $("#view11").removeClass("active");
            $("#view11").children("img").attr("src","images/switch_11.png");

            $("#view13").removeClass("active");
            $("#view13").children("img").attr("src","images/switch_13.png");

            var theimg = $(this).children("img");
            theimg.attr("src","images/switch_12_active.png");

            // remove the list class and change to grid
            theproducts.removeClass("photo_gallery_11");
            theproducts.removeClass("photo_gallery_13");
            theproducts.addClass("photo_gallery_12");

        } 
        else if(theid == "view11") {
            $("#view12").removeClass("active");
            $("#view12").children("img").attr("src","images/switch_12.png");

            $("#view13").removeClass("active");
            $("#view13").children("img").attr("src","images/switch_13.png");

            var theimg = $(this).children("img");
            theimg.attr("src","images/switch_11_active.png");

            // remove the list class and change to grid
            theproducts.removeClass("photo_gallery_12");
            theproducts.removeClass("photo_gallery_13");
            theproducts.addClass("photo_gallery_11");

        } 

    }

}); 

document.addEventListener('touchmove', function(event) {
   if(event.target.parentNode.className.indexOf('navbarpages') != -1 || event.target.className.indexOf('navbarpages') != -1 ) {
    event.preventDefault(); }
}, false);

// Add ScrollFix
var scrollingContent = document.getElementById("pages_maincontent");
new ScrollFix(scrollingContent);


var ScrollFix = function(elem) {
    // Variables to track inputs
    var startY = startTopScroll = deltaY = undefined,

    elem = elem || elem.querySelector(elem);

    // If there is no element, then do nothing  
    if(!elem)
        return;

    // Handle the start of interactions
    elem.addEventListener('touchstart', function(event){
        startY = event.touches[0].pageY;
        startTopScroll = elem.scrollTop;

        if(startTopScroll <= 0)
            elem.scrollTop = 1;

        if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
            elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
    }, false);
};

})

What shall i remove from it to solve my problem?

Answer 1

#!/subfolder/index.html

这让我觉得您正在使用单页应用程序框架/库，如Angular或其他相关内容。所以也许你的问题不是在HTML中，而是在你的javascript代码中。

Answer 2

请删除所有的javascript并检查它是否正常工作然后将所有js逐个恢复并测试你会发现冲突javascript解决该冲突。它会正常工作。

无法通过<a> tag

2 个答案: