Loading page with a link into view not working V1

I have done a CMS with the kitchensink layout v1 with a left menu and the right main-view where I load startpage.html

And from the left menu I load page1.html in the main-view.
In page1.html I have a bottom tabbar/toolbar and when I click on any of the tabs I want to load a new page in view-1 and view-2 etc.

But it is not loading the view and make it visible!?

So this is what I have:
index.html

<div class="views">

<div class="view view-left navbar-through">
menu content here..
</div>

<div class="view view-main navbar-through">
main view content here..
</div>

<div class="view view-1 navbar-through">
view-1 content here...
</div>

<div class="view view-2 navbar-through">
view-2 content here...
</div>

</div>

Then in my .js file I init the views and load the default pages in them and this works. I loads the correct pages in the different views.

var mainView=myApp.addView('.view-main',{
	dynamicNavbar:true,
	});
mainView.loadPage({url:'startpage.html', animatePages:false});

var view1=myApp.addView('.view-1',{
	dynamicNavbar:true,
	});
view1.loadPage({url:'page1.html', animatePages:false});

var view2=myApp.addView('.view-2',{
	dynamicNavbar:true,
	});
view2.loadPage({url:'page2.html', animatePages:false});

Then in page1.html where I have the tabbar, and from where I want to load different pages in different views I have this:

    <div class="navbar">
      <div class="navbar-inner">
        <div class="center">PAGE1</div>
        <div class="right">
         <a href="#" class="link icon-only open-panel"> <i class="icon icon-bars"></i></a>
        </div>
      </div>
    </div>

<div class="pages">
<div data-page="page1" class="page no-swipeback">

    <div class="toolbar tabbar">
        <div class="toolbar-inner">

            <a href="page1.html" data-view=".view-1" class="subtab-link active no-animation">
                 LOAD PAGE1 IN VIEW 1
            </a>

            <a href="page2.html" data-view=".view-2" class="subtab-link no-animation">
                LOAD PAGE2 IN VIEW2
            </a>

            <a href="page3.html" data-view=".view-3" class="subtab-link no-animation">
                LOAD PAGE3 IN VIEW3
            </a>
           
        </div>
      </div>

      <div class="page-content">
        <div class="content-block" style="margin-top:20px;">
             some page content here...
       </div>
    </div>

</div>
</div>

But when I click the link to load for example page2.html in view-2 then nothing happens!
Any input really appreciated, thanks.

I also tried to open page3.html in view-1 from the left menu, but nothing. And no errors.

So the view is not getting active and it is not loading the page that I want. What am I missing?