How to activate link in another html file?

Question

Using this thread I carried out my header into the individual html file

header.html:

<div class="navbar navbar-default navbar-fixed-top" id="top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse" role="navigation" style="height: auto;">
      <ul class="nav navbar-nav">
        <li><a href="/page1.html">Page1</a></li>
        <li><a href="/page2.html">Page2</a></li>
      </ul>
    </div>
  </div>
</div>

and included it in my index.html.

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script> 
$(function(){
  $("#navbar-header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script>

and

<div id="navbar-header"></div>

My question is, how to apply 'active' class on selected page (page1 and page2)?

<li class="active"><a href="/page1.html">Equator Server</a></li>

This is so unclear i can't even read the last sentence. What is this supposed to mean ? "Activate" ? — Larta, Aug 04 '14 at 11:18
Yogesh is right, my question is how to apply activate class on selected page? — fen1ksss, Aug 04 '14 at 11:47
Do you have to use active class? What if you get the desired styling results without using the 'active' class in your html. If yes, I can post the answer. — Pav, Aug 04 '14 at 13:30
Yes, I need just styling results while one of the page has been chosen. — fen1ksss, Aug 04 '14 at 13:41

score 0 · Answer 1 · edited Aug 04 '14 at 14:42

0

You can call a jQuery Click() event on target element by adding a click event listener on source element (an element which should activate a link on another html).

$('.icon-bar-1').on('click', function(){
  $('.page-1').click(function(){/* code to perform on targetted click listener */});
});

edited Aug 04 '14 at 14:42

nsthethunderbolt

1,979
1
15
23

answered Aug 04 '14 at 11:22

Andrejs

1

Andrejs, thank you for your answer could you please make it clear, is it necessary to put a class inside
tag?
Page1

fen1ksss

Aug 04 '14 at 13:06

score 0 · Accepted Answer · answered Mar 30 '15 at 15:51

It is possible to use jQuery's .addClass(), using specific class in the html, for example

HTML-file to add menu

<div class="class1" id="navbar-header"></div>

separate file with header

$(document).ready(function () {
        if ($( "#navbar-header" ).hasClass( "class1" )) {
            $("#id-to-add").addClass("active");
        }
    });

How to activate link in another html file?

2 Answers2