Anchor link inside same tab

Hi

PaulOB has helped me a great deal here
ttri dot biz/fz_test/sidebar-test/
in order to have the tabs and theirs links, and I yet have another issue:
Anchor a link on the same tab, keep the tab active, and its content to display while moving to the target spot.

Please see tab 4 (link 4)

I tried playing with the second snip of js, trying different combinations, i.e. change one var name, change both names, and no matter what when clicking on the “go to tab 4 target 4” I get a blank tab, with all content hidden.

I also tried with and without the js snip and adding
<div class="fz-target fz-t-4" id="item-4-a"></div>
and that does not trigger the link, or again hides the content based on the combination used.

Thank you

Is this the same question you asked me via PM?

You don’t seem to be using the code I gave and you are still using duplicate ids which are not allowed.

This is the code I gave you.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<title>sidebar test</title>
<meta charset="utf-8">

<!-- Bootstrap core CSS -->
<link href="http://ttri.biz/fz_test/sidebar-test/css_afz/bootstrap.min.css" rel="stylesheet">
<!-- FZ custom styles CSS put after bootstrap to override it -->
<link rel="stylesheet" href="http://ttri.biz/fz_test/sidebar-test/css_afz/stylesheet-web-fz-1.css" />
<link rel="stylesheet" href="http://ttri.biz/fz_test/sidebar-test/css_afz/sidebar-left-1-b.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>

<body>
<div class="fz-wrapper">
  <div class="row">
    <div class="col-sm-3">
      <h1>logo</h1>
    </div>
    <div class="col-sm-9"> </div>
  </div>
  <div class="row fz">
    <div class="col-sm-3 fz-top-nav">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar toggle-1"></span> <span class="icon-bar toggle-2"></span> <span class="icon-bar toggle-3"></span> <span class="icon-bar toggle-4"></span> <span class="icon-bar toggle-5"></span> </button>
      </div>
      <!-- .navbar-header -->
      
      <div class="navbar-collapse collapse">
        <div class="sidebar-links">
          <ul class="nav navbar-nav">
            <li>
              <div class="fz-intro-link"> <a id="fz-first-link" class="link-01 fz-current-link" href="#item-1">
                <div id="fz-hover-slide-1"><i class="fa fa-picture-o"></i> link 1</div>
                <i class="fa fa-picture-o"></i> link 1 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-2">
                <div id="fz-hover-slide-2"><i class="fa fa-picture-o"></i> link 2</div>
                <i class="fa fa-picture-o"></i> link 2 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-3">
                <div id="fz-hover-slide-3"><i class="fa fa-picture-o"></i> link 3</div>
                <i class="fa fa-picture-o"></i> link 3 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-4">
                <div id="fz-hover-slide-4"><i class="fa fa-picture-o"></i> link 4</div>
                <i class="fa fa-picture-o"></i> link 4 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-5">
                <div id="fz-hover-slide-5"><i class="fa fa-picture-o"></i> link 5</div>
                <i class="fa fa-picture-o"></i> link 5 </a> </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- .nav-collapse --> 
    </div>
    <!-- col-sm-3 .fz-top-nav -->
    
    <div class="col-sm-9">
      <div class="fz-scroll-col-dx">
        <section>
          <div class="page-section intro">
            <div class="container">
              <div class="fz-content">
                <div class="fz-target fz-t-1" id="item-1"></div>
                <div class="fz-target fz-t-2" id="item-2"></div>
                <div class="fz-target fz-t-3" id="item-3"></div>
                <div class="fz-target fz-t-4" id="item-4"></div>
                <div class="fz-target fz-t-5" id="item-5"></div>
                <div id="item-1a" class="fz-tab fz-tab-1 fz-first-tab">
                  <h1>test 01</h1>
                  <p> test one </p>
                  <p> 01 </p>
                  <a class="tablink" data-destination="2" href="#item-2">go to tab 2</a> </div>
                <div id="item-2a" class="fz-tab fz-tab-2" >
                  <h1>test 02</h1>
                  <p> test two - 02 </p>
                  <a  class="tablink" data-destination="4" href="#item-4">go to tab 4</a> </div>
                <div id="item-3a" class="fz-tab fz-tab-3">
                  <h1>test 3</h1>
                  <p> test three - 03 </p>
                </div>
                <div  id="item-4a" class="fz-tab fz-tab-4">
                  <h1>test 4</h1>
                  <p> test four </p>
                  <p> 04 </p>
                  <p> <a class="tablink" data-destination="1" href="#item-1">go to tab 1</a> </p>
                  <p> some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer </p>
                </div>
                <div id="item-5a" class="fz-tab fz-tab-5">
                  <h1>test 5</h1>
                  <p> test five </p>
                  <p> 05 </p>
                </div>
                <div id="item-6a" class="fz-tab fz-tab-6">
                  <h1>test 6</h1>
                  <p> test six </p>
                  <p> will this be visible? will this be visible? will this be visible? will this be visible? will this be visible? </p>
                </div>
              </div>
            </div>
            <!-- .container --> 
          </div>
          <!-- .page-section intro --> 
        </section>
      </div>
      <!-- .fz-scroll-col-dx --> 
    </div>
    <!-- .col-md-9 --> 
  </div>
  <!-- .row -->
  
  <div class="row fz-footer">
    <div class="col-sm-offset-3 col-sm-9"> footer test </div>
  </div>
</div>
<!-- .fz-wrapper --> 

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ttri.biz/fz_test/sidebar-test/js_afz/bootstrap.min.js"></script> 
<script>
$('#fz-first-link')[0].click()
$(".fz-intro-link a").click(function() {
	$(".fz-intro-link a").removeClass('fz-current-link');
	$(".fz-first-tab").removeClass('fz-first-tab');
	$(this).addClass('fz-current-link');
});
$(".tablink").click(function() {
	$(".fz-intro-link a").removeClass('fz-current-link');
	$(".fz-first-tab").removeClass('fz-first-tab');
	var theTarget = $(this).data('destination') -1;
	var destination = $('.sidebar-links .navbar-nav li').eq(theTarget);
	$(destination).find('a').addClass('fz-current-link');
});


</script>
</body>
</html>

Just copy that code and save it locally for testing and just open it in your browser and it will work. Then let me know what function you are now trying to implement that is not present on that demo?

Thank you.

No it’s not.
That question was about linking from one tab content to another tab, and have the new tab set as active:
i.e.
You are reading tab-1, and it has a link to tab-2

This time the problem is in the same tab
i.e.
You are in tab-1, and it has a link to a section of the same tab-1 further down the page.

You can see the link in tab-1 pointing to tab-2, and from there to tab-4 work as expected by your solution, whereas in tab-4 the link to tab-4_target-4 (go to tab 4 target 4) does not work, it should show the bottom of page “This is tab 4 target 4 This is tab 4 target 4”.

As said in pm your solution works perfectly for the first case (tab-x to tab-y)

I just checked the sample page, I am sorry I gave the old (wrong) test page in op, please try this:
ttri dot biz/fz_test

As per duplicate IDs there are some as you suggested in an older thread in order to have the correct active tab highlighted.

Ahh, that’s what had me confused :smile:

The main problem (and one I have a mentioned a few times now) is that you are using the :target method to show tabs (whereas previously I suggested the checkbox hack or js instead) because the problem with the :target selector method is that once** something else becomes a target** then the tab will no longer have any of the rules applied and the tab will disappear.

The css is only applied to the tab when the id of the tab is the target. Once you link to something else then that new destination is the :target and any styles applied to other targets will no longer apply.

Therefore if you want to link to content within the same tab then you need to find a more robust method to do so. If you google: ccs tabs with :target you will see that all the demos fail when an anchor is added into the mix when the destination is within a tab. Usually a link takes you somewhere else so it would not matter that the tab disappears but ‘in-page’ linking requires the tabs to be visible so you cannot use :target for this.

Sorry but I did suggest at the start that there were more robust methods than this. It all depends whether you see the need for in page links or not. Generally in-page linking is not that user friendly unless its a back to top type of thing or a faq section perhaps.

You must have misunderstood or I didn’t make myself clear but I hope I would never say to use duplicate ids because ids are unique and there must only be one id of the same name on a page.

You must have misunderstood or I didn’t make myself clear but I hope I would never say to use duplicate ids because ids are unique and there must only be one id of the same name on a page

My apologies for misunderstanding and for attributing it to you, you are absolutely correct, indeed I had followed your suggestions, and in the correct link provided there are not duplicate IDs as per your suggestions, and by double chacking with w3 validator.
The fault is all on me, you have been clear.

The main problem (and one I have a mentioned a few times now) is that you are using the :target method to show tabs (whereas previously I suggested the checkbox hack or js instead) because the problem with
the :target selector method is that once** something else becomes a target** then the tab will no longer have any of the rules applied and the tab will disappear.

I remember perfectly, and regret not having listened to you, would have saved you and myself some time …

I guess I’ll have to start over, I did play with the checkbox hack at the time, and didn’t quite get the beautiful result provided by you; I am reading a js book trying to learn, but I guess I have to read it more than once to even dare to try it.

Honestly I am ashamed to even ask anymore here to start over with the js approach, for now I’ll keep it as is till I’ll hopefully with your help get the js version, and avoid the in-page link.

Regarding the in-page link the article you supplied is debatable IMHO, and I am not saying it pretending to be an expert, but from a user’s point of view, not to mention that it is kind of dated, I am not arguing the points, it’s the general no-no conveyed; and in the last years there are lots of sites that by using the onepage format have that; I believe everything changes, and the web is not immune to that.
Probably it could be a good topic to discuss on in 2016.

Thank you again for your patience and kindness.

You can add some js to keep the tab open if you want.

e.g.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<title>sidebar test</title>
<meta charset="utf-8">

<!-- Bootstrap core CSS -->
<link href="http://ttri.biz/fz_test/sidebar-test/css_afz/bootstrap.min.css" rel="stylesheet">
<!-- FZ custom styles CSS put after bootstrap to override it -->
<link rel="stylesheet" href="http://ttri.biz/fz_test/sidebar-test/css_afz/stylesheet-web-fz-1.css" />
<link rel="stylesheet" href="http://ttri.biz/fz_test/sidebar-test/css_afz/sidebar-left-1-b.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>

.fz-tab.in-tab{display:block}
</style>
</head>

<body>
<div class="fz-wrapper">
  <div class="row">
    <div class="col-sm-3">
      <h1>logo</h1>
    </div>
    <div class="col-sm-9"> </div>
  </div>
  <div class="row fz">
    <div class="col-sm-3 fz-top-nav">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar toggle-1"></span> <span class="icon-bar toggle-2"></span> <span class="icon-bar toggle-3"></span> <span class="icon-bar toggle-4"></span> <span class="icon-bar toggle-5"></span> </button>
      </div>
      <!-- .navbar-header -->
      
      <div class="navbar-collapse collapse">
        <div class="sidebar-links">
          <ul class="nav navbar-nav">
            <li>
              <div class="fz-intro-link"> <a id="fz-first-link" class="link-01 fz-current-link" href="#item-1">
                <div id="fz-hover-slide-1"><i class="fa fa-picture-o"></i> link 1</div>
                <i class="fa fa-picture-o"></i> link 1 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-2">
                <div id="fz-hover-slide-2"><i class="fa fa-picture-o"></i> link 2</div>
                <i class="fa fa-picture-o"></i> link 2 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-3">
                <div id="fz-hover-slide-3"> <i class="fa fa-picture-o"></i> link 3 </div>
                <i class="fa fa-picture-o"></i> link 3 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-4">
                <div id="fz-hover-slide-4"> <i class="fa fa-picture-o"></i> link 4 </div>
                <i class="fa fa-picture-o"></i> link 4 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-5">
                <div id="fz-hover-slide-5"> <i class="fa fa-picture-o"></i> link 5 </div>
                <i class="fa fa-picture-o"></i> link 5 </a> </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- .nav-collapse --> 
    </div>
    <!-- col-sm-3 .fz-top-nav -->
    
    <div class="col-sm-9">
      <div class="fz-scroll-col-dx">
        <section>
          <div class="page-section intro">
            <div class="container">
              <div class="fz-content">
                <div class="fz-target fz-t-1" id="item-1"></div>
                <div class="fz-target fz-t-2" id="item-2"></div>
                <div class="fz-target fz-t-3" id="item-3"></div>
                <div class="fz-target fz-t-4" id="item-4"></div>
                <div class="fz-target fz-t-5" id="item-5"></div>
                <div id="item-1a" class="fz-tab fz-tab-1 fz-first-tab">
                  <h1>test 01</h1>
                  <p> test one </p>
                  <p> 01 </p>
                  <a class="tablink" data-destination="2" href="#item-2">go to tab 2</a> </div>
                <div id="item-2a" class="fz-tab fz-tab-2" >
                  <h1>test 02</h1>
                  <p> test two - 02 </p>
                  <a  class="tablink" data-destination="4" href="#item-4">go to tab 4</a> </div>
                <div id="item-3a" class="fz-tab fz-tab-3">
                  <h1>test 3</h1>
                  <p> test three - 03 </p>
                </div>
                <div  id="item-4a" class="fz-tab fz-tab-4">
                  <h1>test 4</h1>
                  <p> test four </p>
                  <p> 04 </p>
                  <p> <a class="tablink" data-destination="1" href="#item-1">go to tab 1</a> </p>
                  <p> <a class="inpage-links" href="#item-4-a">go to tab 4 target 4</a> some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer </p>
                  <p id="item-4-a">---</p>
                  <p>This is tab 4 target 4 This is tab 4 target 4 </p>
                  <p>This is tab 4 target 4 This is tab 4 target 4 </p>
                </div>
                <div id="item-5a" class="fz-tab fz-tab-5">
                  <h1>test 5</h1>
                  <p> test five </p>
                  <p> 05 </p>
                </div>
                <div id="item-6a" class="fz-tab fz-tab-6">
                  <h1>test 6</h1>
                  <p> test six </p>
                  <p> will this be visible? will this be visible? will this be visible? will this be visible? will this be visible? </p>
                </div>
              </div>
            </div>
            <!-- .container --> 
          </div>
          <!-- .page-section intro --> 
        </section>
      </div>
      <!-- .fz-scroll-col-dx --> 
    </div>
    <!-- .col-md-9 --> 
  </div>
  <!-- .row -->
  
  <div class="row fz-footer">
    <div class="col-sm-offset-3 col-sm-9"> footer test </div>
  </div>
</div>
<!-- .fz-wrapper --> 

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ttri.biz/fz_test/sidebar-test/js_afz/bootstrap.min.js"></script> 
<script>
$('#fz-first-link')[0].click()
$(".fz-intro-link a").click(function() {
	$(".fz-intro-link a").removeClass('fz-current-link');
	$(".fz-first-tab").removeClass('fz-first-tab');
	$(this).addClass('fz-current-link');
});
$(".tablink").click(function() {
	$(".fz-intro-link a").removeClass('fz-current-link');
	$(".fz-first-tab").removeClass('fz-first-tab');
	var theTarget = $(this).data('destination') -1;
	var destination = $('.sidebar-links .navbar-nav li').eq(theTarget);
	$(destination).find('a').addClass('fz-current-link');
});

$(".fz-intro-link a,.tablink").click(function() {
	 $('.fz-tab').removeClass('in-tab');
});
$(".inpage-links").click(function() {
 	 $('.fz-tab').removeClass('in-tab');
	 $(this).closest('.fz-tab').addClass('in-tab');
});

</script>
</body>
</html>

A class of .inpage-links is added to any internal links that you need and then the js will keep the tab open by appending a class to the tab.

.fz-tab.in-tab{display:block}

Of course we are getting close to a full js version now :slight_smile:

1 Like

Tidied up a little to use js for the display and target as a sort of fallback.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<title>sidebar test</title>
<meta charset="utf-8">

<!-- Bootstrap core CSS -->
<link href="http://ttri.biz/fz_test/sidebar-test/css_afz/bootstrap.min.css" rel="stylesheet">
<!-- FZ custom styles CSS put after bootstrap to override it -->
<link rel="stylesheet" href="http://ttri.biz/fz_test/sidebar-test/css_afz/stylesheet-web-fz-1.css" />
<link rel="stylesheet" href="http://ttri.biz/fz_test/sidebar-test/css_afz/sidebar-left-1-b.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
.fz-tab.tabon {display:block}
.navbar-nav {margin-left:15px;}
.fz-top-nav {left:auto;}
.target-link:target {background:red}/* this rule for testing only*/
</style>
</head>

<body>
<div class="fz-wrapper">
  <div class="row">
    <div class="col-sm-3">
      <h1>logo</h1>
    </div>
    <div class="col-sm-9"> </div>
  </div>
  <div class="row fz">
    <div class="col-sm-3 fz-top-nav">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar toggle-1"></span> <span class="icon-bar toggle-2"></span> <span class="icon-bar toggle-3"></span> <span class="icon-bar toggle-4"></span> <span class="icon-bar toggle-5"></span> </button>
      </div>
      <!-- .navbar-header -->
      
      <div class="navbar-collapse collapse">
        <div class="sidebar-links">
          <ul class="nav navbar-nav">
            <li>
              <div class="fz-intro-link"> <a class="link-01 linkfirst" href="#item-1">
                <div id="fz-hover-slide-1"><i class="fa fa-picture-o"></i> link 1</div>
                <i class="fa fa-picture-o"></i> link 1 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-2">
                <div id="fz-hover-slide-2"><i class="fa fa-picture-o"></i> link 2</div>
               <i class="fa fa-picture-o"></i> link 2 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-3">
                <div id="fz-hover-slide-3"> <i class="fa fa-picture-o"></i> link 3 </div>
                <i class="fa fa-picture-o"></i> link 3 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-4">
                <div id="fz-hover-slide-4"> <i class="fa fa-picture-o"></i> link 4 </div>
                <i class="fa fa-picture-o"></i> link 4 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-5">
                <div id="fz-hover-slide-5"> <i class="fa fa-picture-o"></i> link 5 </div>
                <i class="fa fa-picture-o"></i> link 5 </a> </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- .nav-collapse --> 
    </div>
    <!-- col-sm-3 .fz-top-nav -->
    
    <div class="col-sm-9">
      <div class="fz-scroll-col-dx">
        <section>
          <div class="page-section intro">
            <div class="container">
              <div class="fz-content">
                <div class="fz-target fz-t-1" id="item-1"></div>
                <div class="fz-target fz-t-2" id="item-2"></div>
                <div class="fz-target fz-t-3" id="item-3"></div>
                <div class="fz-target fz-t-4" id="item-4"></div>
                <div class="fz-target fz-t-5" id="item-5"></div>
                <div id="item-1a" class="fz-tab tabfirst fz-tab-1">
                  <h1>test 01</h1>
                  <p> test one </p>
                  <p> 01 </p>
                  <a class="tablink" data-destination="2" href="#item-2">go to tab 2</a> </div>
                <div id="item-2a" class="fz-tab fz-tab-2" >
                  <h1>test 02</h1>
                  <p> test two - 02 </p>
                  <a  class="tablink" data-destination="4" href="#item-4">go to tab 4</a> </div>
                <div id="item-3a" class="fz-tab fz-tab-3">
                  <h1>test 3</h1>
                  <p> test three - 03 </p>
                </div>
                <div  id="item-4a" class="fz-tab fz-tab-4">
                  <h1>test 4</h1>
                  <p> test four </p>
                  <p> 04 </p>
                  <p> <a class="tablink" data-destination="1" href="#item-1">go to tab 1</a> </p>
                  <p> <a href="#item-4a-1">go to tab 4 target 4</a> some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer </p>
                  <p class="target-link" id="item-4a-1">In Page Target</p>
                  <p>This is tab 4 target 4 This is tab 4 target 4 </p>
                  <p>This is tab 4 target 4 This is tab 4 target 4 </p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                </div>
                <div id="item-5a" class="fz-tab fz-tab-5">
                  <h1>test 5</h1>
                  <p> test five </p>
                  <p> 05 </p>
                </div>
                <div id="item-6a" class="fz-tab fz-tab-6">
                  <h1>test 6</h1>
                  <p> test six </p>
                  <p> will this be visible? will this be visible? will this be visible? will this be visible? will this be visible? </p>
                </div>
              </div>
            </div>
            <!-- .container --> 
          </div>
          <!-- .page-section intro --> 
        </section>
      </div>
      <!-- .fz-scroll-col-dx --> 
    </div>
    <!-- .col-md-9 --> 
  </div>
  <!-- .row -->
  
  <div class="row fz-footer">
    <div class="col-sm-offset-3 col-sm-9"> footer test </div>
  </div>
</div>
<!-- .fz-wrapper --> 

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ttri.biz/fz_test/sidebar-test/js_afz/bootstrap.min.js"></script> 
<script>

$('.linkfirst')[0].click();
$('.linkfirst').addClass('fz-current-link');
$('.tabfirst').addClass('tabon');
$(".fz-intro-link a").click(function() {
	var destination = ($(this).attr('href')) + 'a';	
	$('.fz-tab').removeClass('tabon');
	$(destination).addClass('tabon');
	$(".fz-intro-link a").removeClass('fz-current-link');
	$(this).addClass('fz-current-link');
});
$(".tablink").click(function() {
	var theTarget = "";
	var destination = "";
	var destination2 = "";
	$(".fz-intro-link a").removeClass('fz-current-link');
	$('.fz-tab').removeClass('tabon');
	theTarget = $(this).data('destination') -1;
	destination = $('.sidebar-links .navbar-nav li').eq(theTarget);
	destination2 = "#item-" + (theTarget+1) + "a";
	$(destination2).addClass('tabon');
	$(destination).find('a').addClass('fz-current-link');
});

</script>
</body>
</html>

The ‘in page’ links are working because the js is setting the display of the tab and not :target.

Yes the article states that for links from a navigation section in the header or footer are fine when they link to sections of the same page. Or links that go to a dedicated sections such as a faq which I mentioned are always fine. The one page sites these days usually also provide a smooth scroll to the destination so there can be no doubt where you are going and I have used this myself many times this year.

What’s bad is when some links in the middle of content take you down the same page into the middle of some text and then other similar looking links take you to a new page somewhere else. I have often been confused by this behaviour and not realised that I am on the same page! The number one rule of web design is “to not make the user look stupid”.:slight_smile:

The important point is that you need to design it well and unambiguously so that the user knows where they are going when they click a link.

1 Like

Speechless!
Thank you … maybe you are tired of hearing me saying it, but it’s your fault :wink:

I had followed your suggestion (thru article you linked) creating a new page, I could have created a new tab as well, but for other design factors I’d like to keep it to 5 tabs, and even managed to have the new page open with the second tab active, changing its content from the first page’s second tab content.

Now I have the new js version from which I removed

<div class="fz-target fz-t-1" id="item-1"></div>
<div class="fz-target fz-t-2" id="item-2"></div>
div class="fz-target fz-t-3" id="item-3"></div>
<div class="fz-target fz-t-4" id="item-4"></div>
<div class="fz-target fz-t-5" id="item-5"></div>

and the relative styling from stylesheet

.fz-t-1:target ~ .fz-tab-1{display:block}
.fz-t-2:target ~ .fz-tab-2{display:block}
.fz-t-3:target ~ .fz-tab-3{display:block}
.fz-t-4:target ~ .fz-tab-4{display:block}
.fz-t-5:target ~ .fz-tab-5{display:block}

Yes, the article and you are pretty clear about it, and I totally agree with not creating confusion for the user, indeed I am a breadcrumb fan for that same reason: clearly inform user where they are.
My reference to the onepage sites was more than the navigation about some of the call to action links, and or feature description links, usually in the top section of the page, but not in the navigation.
In the end it comes to what you said about clearing any ambiguosity and confusion, and of course ugliness, like the targets near the end of a page, putting some other stuff visible whereas the first visible line should be the target, which is exactly why you added the extra
scroll
scroll
scroll

to the test page.

Thank you, and I’d like to renew my best wishes for a great 2016 to you.

Hope this is the last of the series, will you please kindly help me with yet another link case:

by creating other pages how to target specific tab on the new page, and eventually from that page back to specific tab in the home (index) page
ttri dot biz/fz_test/
form tab 4 there is one link going to page_2 where I manually edited the “linkfirst”, and “tabfirst” moving it from the first tab to the second tab, and it works fine, but this limits one link to a specific tab on that page, whereas it would be desirable to target specific tab on the given page, same would be true linking back from the given page to the homepage if needing to target specific tab in the homepage, i.e. the footer link on page_2

Thank you

This is the major problem with tabs and quite a complex problem to solve.

We solved the problem of linking within the same page by adding a class to the links that have destination inside a tab and then the js sets classes on the correct nav item and correct tab accordingly to show the display as required (and removes classes from previous tabs etc).

The problem occurs when you arrive at the new page via a url that has a fragment identifier and that destination is inside a tab. The page knows nothing about the url and so the tab content is not shown unless it is the currently open tab. Therefore these are the things that need to happen.

  1. On page load query the url string to see if there is a fragment identifier.
  2. If there is a fragment identifier then isolate it and turn it into a variable for later use.
  3. Check whether the id that matches the fragment identifier is inside a hidden tab or not.
    3 a) If the destination is inside a hidden tab then open that tab and set the navigation highlights.
    3 b) If the destination is not inside a hidden tab then do nothing except make sure that the first tab is open by default.

Each page should be the same with no special code for individual pages as the scripts will be external once you have this running properly so you cannot do as you have done and simply move the firstlink class to a tab that you want opened because that is only true in that one special case. The page should open with the first tab highlighted unless it has been reached by a fragment identifier in which case open the correct tab assuming the destination is inside a tab.

If this sounds like what you wanted then we can try writing a script that will do this but as you can see it will rely on getting the fragment identifier from the page url (if there is one).

Thank you.

It is somehow encouraging what you wrote 'cause it’s basically the process I imagined, at least I am learning the thought pattern, don’t know how correct but I did think about a script in the head and the body onload=“”, anyhow I couldn’t have put it down clearly as you did in the numbered list.

Yes I was/am aware of the custom page “hack”, I had done that after your suggested article and it was intended for that specific case, from which I found about this new scenario when I tried to link back to the homepage, which of course worked fine for the first tab, but not so for the others.

In one of my trials and errors in playing along the lines of your last code I could see the target tab be highlighted and blank for a split second before the default first tab was displayed.

Hi,

I re-wrote the script to handle going to specific links on any page that has the tabs by checking the fragment identifier if the url. I removed the data attributes (destination=“1”) etc and got the destination from the href so the code is easier to manage.

All you need is to add a tablink class to any link that is inside a tab (links that open in the same tab shouldn’t need a class). External links will just be as normal as the new page will pick up the destination from the href.

Note that I removed the divs for the previous target method as they just complicated things and got in the way. Make sure that the ids you link to are correct as we are linking direct to item-1a instead of #item1 as before. It doesn’t matter what you name the ids now but just make sure you are linking to the correct spot.

Here is the revised code but note that I have called these page_1, page2 and page3 for ease of testing so in your original you had index as page one so you will need ot change that as required when you implement it.

The js is the same for all pages and so is the html (apart from links to other pages). If you don;t link to a specific tab then the page opens with the first tab as the default. I suggest that you save my three pages as page_1.html, page_2.html and page_3.html and test with them locally first so you can see them in working order before you transfer to your own pages.

page1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<title>sidebar test</title>
<meta charset="utf-8">

<!-- Bootstrap core CSS -->
<!-- Bootstrap core CSS -->
<link href="http://ttri.biz/fz_test/sidebar-test/css_afz/bootstrap.min.css" rel="stylesheet">
<!-- FZ custom styles CSS put after bootstrap to override it -->
<link rel="stylesheet" href="http://ttri.biz/fz_test/sidebar-test/css_afz/stylesheet-web-fz-1.css" />
<link rel="stylesheet" href="http://ttri.biz/fz_test/sidebar-test/css_afz/sidebar-left-1-b.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
.fz-tab.tabon {display:block}
.navbar-nav {margin-left:15px;}
.fz-top-nav {left:auto;}
.target-link:target {background:red}/* this rule for testing only*/
</style>
</head>

<body>
<div class="fz-wrapper">
  <div class="row">
    <div class="col-sm-3">
      <h1>logo</h1>
    </div>
    <div class="col-sm-9"> </div>
  </div>
  <div class="row fz">
    <div class="col-sm-3 fz-top-nav">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar toggle-1"></span> <span class="icon-bar toggle-2"></span> <span class="icon-bar toggle-3"></span> <span class="icon-bar toggle-4"></span> <span class="icon-bar toggle-5"></span> </button>
      </div>
      <!-- .navbar-header -->
      
      <div class="navbar-collapse collapse">
        <div class="sidebar-links">
          <ul class="nav navbar-nav">
            <li>
              <div class="fz-intro-link"> <a class="link-01 linkfirst" href="#item-1a">
                <div id="fz-hover-slide-1"><i class="fa fa-picture-o"></i> link 1</div>
                <i class="fa fa-picture-o"></i> link 1 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-2a">
                <div id="fz-hover-slide-2"><i class="fa fa-picture-o"></i> link 2</div>
                <i class="fa fa-picture-o"></i> link 2 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-3a">
                <div id="fz-hover-slide-3"> <i class="fa fa-picture-o"></i> link 3 </div>
                <i class="fa fa-picture-o"></i> link 3 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-4a">
                <div id="fz-hover-slide-4"> <i class="fa fa-picture-o"></i> link 4 </div>
                <i class="fa fa-picture-o"></i> link 4 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-5a">
                <div id="fz-hover-slide-5"> <i class="fa fa-picture-o"></i> link 5 </div>
                <i class="fa fa-picture-o"></i> link 5 </a> </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- .nav-collapse --> 
    </div>
    <!-- col-sm-3 .fz-top-nav -->
    
    <div class="col-sm-9">
      <div class="fz-scroll-col-dx">
        <section>
          <div class="page-section intro">
            <div class="container">
              <div class="fz-content">
                <div id="item-1a" class="fz-tab tabfirst fz-tab-1">
                  <h1>test 01</h1>
                  <p> test one </p>
                  <p id="testtab">test 01 </p>
                  <!-- tablink class only needed for current page when destination is inside another tab -->
                  <p><a class="tablink" href="#item-2a">go to tab 2</a> </p>
                  <p><a class="tablink" href="#item-4a-1">go to tab 4 and then down to target4</a> </p>
                  <p><a class="tablink" href="#item-4a">go to tab 4 </a> </p>
                  <p><a class="tablink" href="#test">go to tab test at bottom </a> </p>
                  <p><a  href="#test">go to tab test at bottom </a> </p>
                  
                </div>
                <div id="item-2a" class="fz-tab fz-tab-2" >
                  <h1>test 02</h1>
                  <p> test two - 02 </p>
                  <p><a class="tablink" href="#item-4a">go to tab 4</a></p>
                </div>
                <div id="item-3a" class="fz-tab fz-tab-3">
                  <h1>test 3</h1>
                  <p> test three - 03 </p>
                </div>
                <div  id="item-4a" class="fz-tab fz-tab-4">
                  <h1>test 4</h1>
                  <p> test four </p>
                  <p> 04 </p>
                  <!-- tablink class only needed for current page when destination is inside another tab -->
                  <p> <a class="tablink" href="#item-1a">go to tab 1</a> </p>
                  <p> <a href="page_2.html#item-2a">go to tab 2 on page 2</a></p>
                  <p> <a href="page_3.html#item-2a">go to tab 2 on page 3</a></p>
                  <p> <a href="#item-4a-1">go to this tab (tab 4) target 4</a></p>
                  <p> some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer </p>
                  <p class="target-link" id="item-4a-1">In Page Target 4</p>
                  <p>This is tab 4 target 4 This is tab 4 target 4 </p>
                  <p>This is tab 4 target 4 This is tab 4 target 4 </p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                </div>
                <div id="item-5a" class="fz-tab fz-tab-5">
                  <h1>test 5</h1>
                  <p> test five </p>
                  <p> 05 </p>
                </div>
                <div id="item-6a" class="fz-tab fz-tab-6">
                  <h1>test 6</h1>
                  <p> test six </p>
                  <p> will this be visible? will this be visible? will this be visible? will this be visible? will this be visible? </p>
                </div>
              </div>
            </div>
            <!-- .container --> 
          </div>
          <!-- .page-section intro --> 
        </section>
      </div>
      <!-- .fz-scroll-col-dx --> 
    </div>
    <!-- .col-md-9 --> 
  </div>
  <!-- .row -->
  
  <div class="row fz-footer">
    <div class="col-sm-offset-3 col-sm-9"> footer test </div>
  </div>
</div>
<!-- .fz-wrapper -->

<div id="test">test</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ttri.biz/fz_test/sidebar-test/js_afz/bootstrap.min.js"></script> 
<script>
(function() {
    if (window.location.hash) {
        var theHash = window.location.hash; // find fragment identifier
        var foundTab = $(theHash).closest('.fz-tab');
		var theHash2 = '#' + $(foundTab).attr('id');
        if (foundTab.length) { // fragment exists and is inside a tab so open tab and highlight nav
            removeClasses(); // first remove current tab classes
            foundTab.addClass('tabon'); // open tab
            $(".link-01[href=" + theHash2 + "]").addClass('fz-current-link'); //find nav to highlight
        } else { // fragment exists but is not in a tab so just open first tab and highlight first tab
            openDefaultTab()
        }
    } else { // Fragment doesn't exist so open first tab by default
        openDefaultTab()
    }

    $(".fz-intro-link a").click(function() {
        var destination = $(this).attr('href');
        removeClasses();
        $(destination).addClass('tabon');
        $(this).addClass('fz-current-link');
		return false;
    });

    $(".tablink").click(function() {
        var theTarget = $(this).attr('href');
        var foundTab = $(theTarget).closest('.fz-tab');
		var theHash2 = '#' + $(foundTab).attr('id');
        if (foundTab.length) {
            removeClasses();
            foundTab.addClass('tabon'); // open tab
            $(".link-01[href=" + theHash2 + "]").addClass('fz-current-link'); //find nav to highlight
        }
		if (theTarget === theHash2){return false}
    });

    function removeClasses() {
        $(".fz-intro-link a").removeClass('fz-current-link');
        $('.fz-tab').removeClass('tabon');
    }

    function openDefaultTab() {
        $('.linkfirst').addClass('fz-current-link');
        $('.tabfirst').addClass('tabon');
    }
})();
</script>
</body>
</html>

page2.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<title>sidebar test</title>
<meta charset="utf-8">

<!-- Bootstrap core CSS -->
<!-- Bootstrap core CSS -->
<link href="http://ttri.biz/fz_test/sidebar-test/css_afz/bootstrap.min.css" rel="stylesheet">
<!-- FZ custom styles CSS put after bootstrap to override it -->
<link rel="stylesheet" href="http://ttri.biz/fz_test/sidebar-test/css_afz/stylesheet-web-fz-1.css" />
<link rel="stylesheet" href="http://ttri.biz/fz_test/sidebar-test/css_afz/sidebar-left-1-b.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
.fz-tab.tabon {display:block}
.navbar-nav {margin-left:15px;}
.fz-top-nav {left:auto;}
.target-link:target {background:red}/* this rule for testing only*/
</style>
</head>

<body>
<div class="fz-wrapper">
  <div class="row">
    <div class="col-sm-3">
      <h1>logo</h1>
    </div>
    <div class="col-sm-9"> </div>
  </div>
  <div class="row fz">
    <div class="col-sm-3 fz-top-nav">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar toggle-1"></span> <span class="icon-bar toggle-2"></span> <span class="icon-bar toggle-3"></span> <span class="icon-bar toggle-4"></span> <span class="icon-bar toggle-5"></span> </button>
      </div>
      <!-- .navbar-header -->
      
      <div class="navbar-collapse collapse">
        <div class="sidebar-links">
          <ul class="nav navbar-nav">
            <li>
              <div class="fz-intro-link"> <a class="link-01 linkfirst" href="#item-1a">
                <div id="fz-hover-slide-1"><i class="fa fa-picture-o"></i> link 1</div>
                <i class="fa fa-picture-o"></i> link 1 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-2a">
                <div id="fz-hover-slide-2"><i class="fa fa-picture-o"></i> link 2</div>
                <i class="fa fa-picture-o"></i> link 2 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-3a">
                <div id="fz-hover-slide-3"> <i class="fa fa-picture-o"></i> link 3 </div>
                <i class="fa fa-picture-o"></i> link 3 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-4a">
                <div id="fz-hover-slide-4"> <i class="fa fa-picture-o"></i> link 4 </div>
                <i class="fa fa-picture-o"></i> link 4 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-5a">
                <div id="fz-hover-slide-5"> <i class="fa fa-picture-o"></i> link 5 </div>
                <i class="fa fa-picture-o"></i> link 5 </a> </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- .nav-collapse --> 
    </div>
    <!-- col-sm-3 .fz-top-nav -->
    
    <div class="col-sm-9">
      <div class="fz-scroll-col-dx">
        <section>
          <div class="page-section intro">
            <div class="container">
              <div class="fz-content">
                <div id="item-1a" class="fz-tab tabfirst fz-tab-1">
                  <h1>test 01</h1>
                  <p> test one </p>
                  <p id="testtab">test 01 </p>
                  <!-- tablink class only needed for current page when destination is inside another tab -->
                  <p><a class="tablink" href="#item-2a">go to tab 2</a> </p>
                  <p><a class="tablink" href="#item-4a-1">go to tab 4 and then down to target4</a> </p>
                  <p><a class="tablink" href="#item-4a">go to tab 4 </a> </p>
                  <p><a class="tablink" href="#test">go to tab test at bottom </a> </p>
                  <p><a  href="#test">go to tab test at bottom </a> </p>
                  
                </div>
                <div id="item-2a" class="fz-tab fz-tab-2" >
                  <h1>test 02</h1>
                  <p> test two - 02 </p>
                  <p><a class="tablink" href="#item-4a">go to tab 4</a></p>
                </div>
                <div id="item-3a" class="fz-tab fz-tab-3">
                  <h1>test 3</h1>
                  <p> test three - 03 </p>
                </div>
                <div  id="item-4a" class="fz-tab fz-tab-4">
                  <h1>test 4</h1>
                  <p> test four </p>
                  <p> 04 </p>
                  <!-- tablink class only needed for current page when destination is inside another tab -->
                  <p> <a class="tablink" href="#item-1a">go to tab 1</a> </p>
                  <p> <a href="page_1.html#item-3a">go to tab 3 on page 1</a></p>
                  <p> <a href="page_3.html#item-2a">go to tab 2 on page 3</a></p>
                  <p> <a href="#item-4a-1">go to this tab (tab 4) target 4</a></p>
                  <p> some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer </p>
                  <p class="target-link" id="item-4a-1">In Page Target 4</p>
                  <p>This is tab 4 target 4 This is tab 4 target 4 </p>
                  <p>This is tab 4 target 4 This is tab 4 target 4 </p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                </div>
                <div id="item-5a" class="fz-tab fz-tab-5">
                  <h1>test 5</h1>
                  <p> test five </p>
                  <p> 05 </p>
                </div>
                <div id="item-6a" class="fz-tab fz-tab-6">
                  <h1>test 6</h1>
                  <p> test six </p>
                  <p> will this be visible? will this be visible? will this be visible? will this be visible? will this be visible? </p>
                </div>
              </div>
            </div>
            <!-- .container --> 
          </div>
          <!-- .page-section intro --> 
        </section>
      </div>
      <!-- .fz-scroll-col-dx --> 
    </div>
    <!-- .col-md-9 --> 
  </div>
  <!-- .row -->
  
  <div class="row fz-footer">
    <div class="col-sm-offset-3 col-sm-9"> footer test </div>
  </div>
</div>
<!-- .fz-wrapper -->

<div id="test">test</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ttri.biz/fz_test/sidebar-test/js_afz/bootstrap.min.js"></script> 
<script>
(function() {
    if (window.location.hash) {
        var theHash = window.location.hash; // find fragment identifier
        var foundTab = $(theHash).closest('.fz-tab');
		var theHash2 = '#' + $(foundTab).attr('id');
        if (foundTab.length) { // fragment exists and is inside a tab so open tab and highlight nav
            removeClasses(); // first remove current tab classes
            foundTab.addClass('tabon'); // open tab
            $(".link-01[href=" + theHash2 + "]").addClass('fz-current-link'); //find nav to highlight
        } else { // fragment exists but is not in a tab so just open first tab and highlight first tab
            openDefaultTab()
        }
    } else { // Fragment doesn't exist so open first tab by default
        openDefaultTab()
    }

    $(".fz-intro-link a").click(function() {
        var destination = $(this).attr('href');
        removeClasses();
        $(destination).addClass('tabon');
        $(this).addClass('fz-current-link');
		return false;
    });

    $(".tablink").click(function() {
        var theTarget = $(this).attr('href');
        var foundTab = $(theTarget).closest('.fz-tab');
		var theHash2 = '#' + $(foundTab).attr('id');
        if (foundTab.length) {
            removeClasses();
            foundTab.addClass('tabon'); // open tab
            $(".link-01[href=" + theHash2 + "]").addClass('fz-current-link'); //find nav to highlight
        }
		if (theTarget === theHash2){return false}
    });

    function removeClasses() {
        $(".fz-intro-link a").removeClass('fz-current-link');
        $('.fz-tab').removeClass('tabon');
    }

    function openDefaultTab() {
        $('.linkfirst').addClass('fz-current-link');
        $('.tabfirst').addClass('tabon');
    }
})();
</script>
</body>
</html>
1 Like

Page3.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<title>sidebar test</title>
<meta charset="utf-8">

<!-- Bootstrap core CSS -->
<!-- Bootstrap core CSS -->
<link href="http://ttri.biz/fz_test/sidebar-test/css_afz/bootstrap.min.css" rel="stylesheet">
<!-- FZ custom styles CSS put after bootstrap to override it -->
<link rel="stylesheet" href="http://ttri.biz/fz_test/sidebar-test/css_afz/stylesheet-web-fz-1.css" />
<link rel="stylesheet" href="http://ttri.biz/fz_test/sidebar-test/css_afz/sidebar-left-1-b.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
.fz-tab.tabon {display:block}
.navbar-nav {margin-left:15px;}
.fz-top-nav {left:auto;}
.target-link:target {background:red}/* this rule for testing only*/
</style>
</head>

<body>
<div class="fz-wrapper">
  <div class="row">
    <div class="col-sm-3">
      <h1>logo</h1>
    </div>
    <div class="col-sm-9"> </div>
  </div>
  <div class="row fz">
    <div class="col-sm-3 fz-top-nav">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar toggle-1"></span> <span class="icon-bar toggle-2"></span> <span class="icon-bar toggle-3"></span> <span class="icon-bar toggle-4"></span> <span class="icon-bar toggle-5"></span> </button>
      </div>
      <!-- .navbar-header -->
      
      <div class="navbar-collapse collapse">
        <div class="sidebar-links">
          <ul class="nav navbar-nav">
            <li>
              <div class="fz-intro-link"> <a class="link-01 linkfirst" href="#item-1a">
                <div id="fz-hover-slide-1"><i class="fa fa-picture-o"></i> link 1</div>
                <i class="fa fa-picture-o"></i> link 1 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-2a">
                <div id="fz-hover-slide-2"><i class="fa fa-picture-o"></i> link 2</div>
                <i class="fa fa-picture-o"></i> link 2 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-3a">
                <div id="fz-hover-slide-3"> <i class="fa fa-picture-o"></i> link 3 </div>
                <i class="fa fa-picture-o"></i> link 3 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-4a">
                <div id="fz-hover-slide-4"> <i class="fa fa-picture-o"></i> link 4 </div>
                <i class="fa fa-picture-o"></i> link 4 </a> </div>
            </li>
            <li>
              <div class="fz-intro-link"> <a class="link-01" href="#item-5a">
                <div id="fz-hover-slide-5"> <i class="fa fa-picture-o"></i> link 5 </div>
                <i class="fa fa-picture-o"></i> link 5 </a> </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- .nav-collapse --> 
    </div>
    <!-- col-sm-3 .fz-top-nav -->
    
    <div class="col-sm-9">
      <div class="fz-scroll-col-dx">
        <section>
          <div class="page-section intro">
            <div class="container">
              <div class="fz-content">
                <div id="item-1a" class="fz-tab tabfirst fz-tab-1">
                  <h1>test 01</h1>
                  <p> test one </p>
                  <p id="testtab">test 01 </p>
                  <!-- tablink class only needed for current page when destination is inside another tab -->
                  <p><a class="tablink" href="#item-2a">go to tab 2</a> </p>
                  <p><a class="tablink" href="#item-4a-1">go to tab 4 and then down to target4</a> </p>
                  <p><a class="tablink" href="#item-4a">go to tab 4 </a> </p>
                  <p><a class="tablink" href="#test">go to tab test at bottom </a> </p>
                  <p><a  href="#test">go to tab test at bottom </a> </p>
                  
                </div>
                <div id="item-2a" class="fz-tab fz-tab-2" >
                  <h1>test 02</h1>
                  <p> test two - 02 </p>
                  <p><a class="tablink" href="#item-4a">go to tab 4</a></p>
                </div>
                <div id="item-3a" class="fz-tab fz-tab-3">
                  <h1>test 3</h1>
                  <p> test three - 03 </p>
                </div>
                <div  id="item-4a" class="fz-tab fz-tab-4">
                  <h1>test 4</h1>
                  <p> test four </p>
                  <p> 04 </p>
                  <!-- tablink class only needed for current page when destination is inside another tab -->
                  <p> <a class="tablink" href="#item-1a">go to tab 1</a> </p>
                  <p> <a href="page_2.html#item-2a">go to tab 2 on page 2</a></p>
                  <p> <a href="page_1.html#item-2a">go to tab 2 on page 1</a></p>
                  <p> <a href="page_1.html#item-4a-1">go to page1 tab 4 target 4</a></p>
                  <p> some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer 
                    some more text making the content longer some more text making the content longer some more text making the content longer </p>
                  <p class="target-link" id="item-4a-1">In Page Target 4</p>
                  <p>This is tab 4 target 4 This is tab 4 target 4 </p>
                  <p>This is tab 4 target 4 This is tab 4 target 4 </p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                  <p>scroll</p>
                </div>
                <div id="item-5a" class="fz-tab fz-tab-5">
                  <h1>test 5</h1>
                  <p> test five </p>
                  <p> 05 </p>
                </div>
                <div id="item-6a" class="fz-tab fz-tab-6">
                  <h1>test 6</h1>
                  <p> test six </p>
                  <p> will this be visible? will this be visible? will this be visible? will this be visible? will this be visible? </p>
                </div>
              </div>
            </div>
            <!-- .container --> 
          </div>
          <!-- .page-section intro --> 
        </section>
      </div>
      <!-- .fz-scroll-col-dx --> 
    </div>
    <!-- .col-md-9 --> 
  </div>
  <!-- .row -->
  
  <div class="row fz-footer">
    <div class="col-sm-offset-3 col-sm-9"> footer test </div>
  </div>
</div>
<!-- .fz-wrapper -->

<div id="test">test</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ttri.biz/fz_test/sidebar-test/js_afz/bootstrap.min.js"></script> 
<script>
(function() {
    if (window.location.hash) {
        var theHash = window.location.hash; // find fragment identifier
        var foundTab = $(theHash).closest('.fz-tab');
		var theHash2 = '#' + $(foundTab).attr('id');
        if (foundTab.length) { // fragment exists and is inside a tab so open tab and highlight nav
            removeClasses(); // first remove current tab classes
            foundTab.addClass('tabon'); // open tab
            $(".link-01[href=" + theHash2 + "]").addClass('fz-current-link'); //find nav to highlight
        } else { // fragment exists but is not in a tab so just open first tab and highlight first tab
            openDefaultTab()
        }
    } else { // Fragment doesn't exist so open first tab by default
        openDefaultTab()
    }

    $(".fz-intro-link a").click(function() {
        var destination = $(this).attr('href');
        removeClasses();
        $(destination).addClass('tabon');
        $(this).addClass('fz-current-link');
		return false;
    });

    $(".tablink").click(function() {
        var theTarget = $(this).attr('href');
        var foundTab = $(theTarget).closest('.fz-tab');
		var theHash2 = '#' + $(foundTab).attr('id');
        if (foundTab.length) {
            removeClasses();
            foundTab.addClass('tabon'); // open tab
            $(".link-01[href=" + theHash2 + "]").addClass('fz-current-link'); //find nav to highlight
        }
		if (theTarget === theHash2){return false}
    });

    function removeClasses() {
        $(".fz-intro-link a").removeClass('fz-current-link');
        $('.fz-tab').removeClass('tabon');
    }

    function openDefaultTab() {
        $('.linkfirst').addClass('fz-current-link');
        $('.tabfirst').addClass('tabon');
    }
})();
</script>
</body>
</html>

Bear in mind that JS isn’t my strongpoint and the experts here could probably refine that code quite a bit.:slight_smile:

1 Like

To a thirsty even dirty water is tasteful, and in this case I think we are comparing at the worst tab water with bottled water. :slight_smile:

Thank you very much.

Just to help you excercise, and improve your js :stuck_out_tongue_winking_eye: there is one small improvement/addition:
i.e.
When you use a link to go to page_2 tab_3, then on page_2 you go to tab_1 and refresh it takes you back to page_2 tab_3 as it keeps the #item-3a in the address bar

It would be nice to have the refresh clear (remove) that, and add the current ID

Just out of curiosity I have couple questions you may clear for me please:
I have put the js in a separate file, and linked to it, and to this end I noticed that it works if I place it at the end of the page, but not when placed in the head section.

Of course I always keep the original, and play with copies.

Yes the js needs to be in the position as shown in the example right at the end of the html. The reason for this is that if you place the js in the head then the html which the js is targeting does not exist yet and the js will fail. Documents are basically parsed from top to bottom as soon as any part is loaded.

All scripts should go at the end of the html before the closing body tag and then you don’t need onload or document ready functions.

There are other benefits to having the scripts at the end of the page such as allowing html and CSS to load without waiting for scripts to load.

Obviously some advance uses of js require it to target elements as soon as they exist and then the scripts would go in the head but would need special routines for that to work.

I’ll answer your other question tomorrow. :smile:

If you remove the return false from the js then that should allow the fragment identifier to be added to the ur.

e.g.

$(".fz-intro-link a").click(function() {
        var destination = $(this).attr('href');
        removeClasses();
        $(destination).addClass('tabon');
        $(this).addClass('fz-current-link');
		//return false;
    });

The only drawback is that if the tabs are longer than the page you will get a jump upwards as the page travels to the link.

Or you could try this for modern browsers as it leaves the link function intact.

$(".fz-intro-link a").click(function(e) {
    var destination = $(this).attr('href');
    removeClasses();
    $(destination).addClass('tabon');
    $(this).addClass('fz-current-link');
		//window.location.hash = destination;
		window.history.replaceState(null, null ,  destination);
		return false;
});

Won’t work locally in Chrome but should work online.

1 Like

If you want to further investigate the accessibility of tabs then you should read this article which details the sort of things you should be looking at.

Things to consider are what happens when js is switched off and how to make tabs more accessible to keyboard users and screen readers etc.

A simple trick is to add a class of no-js to the html element and then make sure the tabs are displayed by default by using this class. You then add some js to remove the class from the html element so the css is never actioned if js is available. This time the script can go in the head because the htnl element is the first thing available.

e.g.

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta name="viewport" content="width=device-width" />
<title>sidebar test</title>
<meta charset="utf-8">
<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>

CSS:

.no-js .fz-tab{display:block!important;border-bottom:5px solid #fff}

Now when you test with js disabled all the panels are available in one long panel and you can still use the side panel to navigate to them as we are using the correct href for each panel in the nav.

Note that I used !important after the display:block in case js was writing inlne styles into the panel as the only way to over-ride inline styles is by using !important (we don’t actually need it in our example). That’s what its better to use class to hide and show elements rather than letting js change the inline style attribute.

1 Like

Thank you very much.

Interesting read, I’ll need to read it few times to study it … hopefully I’ll get something.

Implemented the first option
//return false;
and did not notice jumps, unless I misuanderstood your statement, anyhow, I’ll test with longer pages, and both solutions.
Of course I added the no-js, and it works fine, I did test it in chrome with js disabled, and enabled, and works as expected - localhost testing.

Thank you again.

You would only notice it on tabs that have content taller than the window such as tab4. I feel the second solution is probably a neater solution but both should work.