Lien avec ancre (#) fait �chouer le code JS qui organise une page en onglets

**phdmysql** · 30/03/2018, 15h21

Bonjour,

Ma page d'accueil utilise des onglets et repose sur les codes JS, HTML et CSS suivants. Le premier onglet contient un lien ("Paragraphe suivant") vers un autre paragraphe du m�me onglet.

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<body onload="init()">
<div id="tabTitles">
        <ul id="tabs">
        <li><a href="#tab1">tab1</a></li>
        <li><a href="#tab2">tab2</a></li>
        <li><a href="#tab3">tab3</a></li>
        <li><a href="#tab4">tab4</a></li>
        </ul>
        </div>
 
        <div class="tabContent" id="tab1">
 
 
        <a href="#other_paragraph">Paragraphe suivant</a>
 
        <p>tab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content tab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 contenttab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 </p>
 
        <p id="other_paragraph">tab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content tab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 contenttab1 content - tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 content -tab1 </p>
        </div>
 
        <div class="tabContent" id="tab2">
 
        tab2 content - tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content -tab2 content
 
        </div>
        <div class="tabContent" id="tab3">
 
 
        tab3 content - tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content -tab3 content
        </div>
 
        <div class="tabContent" id="tab4" >
 
        tab4 content - tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content -tab4 content
 
        </div>
</body>

Code JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
var tabLinks = new Array();
var contentDivs = new Array();
 
function init() {
//Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
    if (tabListItems[i].nodeName == "LI") {
        var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
        var id = getHash( tabLink.getAttribute('href') );
        tabLinks[id] = tabLink;
        contentDivs[id] = document.getElementById( id );
    }
}
 
//Assign onclick events to the tab links, and
//highlight the first tab
var i = 0;
 
for( var id in tabLinks ) {
    tabLinks[id].onclick = showTab;
    tabLinks[id].onfocus = function() { this.blur()};
    if (i == 0 ) tabLinks[id].className = 'selected';
    i++;
}
 
//Hide all content divs except the first
var i = 0;
 
for( var id in contentDivs ) {
    if ( i !=0 ) contentDivs[id].className='tabContent hide';
    i++;
}
 
//Show linked tab
if ( document.location.hash ) showTab( document.location.hash.substring(1) );
} // end of init function
 
// ShowTab Function
 
function showTab(selectedId) {
if ( typeof selectedId != 'string' ) var selectedId = getHash(this.getAttribute('href') );
 
//Highlight the selected tab, and dim all others.
//Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
    if ( id == selectedId ) {
        tabLinks[id].className = 'selected';
        contentDivs[id].className = 'tabContent';
    } else {
        tabLinks[id].className ='';
        contentDivs[id].className = 'tabContent hide';
    }
}
 
//Stop the Browser following the link.
return false;
} //end of showTab function
 
function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
    if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}
 
function getHash(url) {
var hashPos = url.lastIndexOf( '#' );
return url.substring(hashPos + 1);
}

Code CSS :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
ul#tabs
            { 
            list-style-type: none; 
            margin: 1em 0 0 0; 
            padding: 0 0 0.3em 0; 
 
            }
 
      ul#tabs li 
            { 
            display: inline-block;
            margin: 0.3em 0;
            padding: 0.3em 0 0 0; 
            }
 
      ul#tabs li a 
            {
            color: #000000; 
            background-color: #f1f0ee;
            border: 1px solid #c9c3ba; 
            padding: 0.3em; 
            text-decoration: none;
            border-radius:0.2em;
            }
 
 
      ul#tabs li a:hover 
            {
            background-color: #dedbde; 
            }
 
      ul#tabs li a.selected 
            {
            color: #FFFFFF; 
            background-color: #000000; 
            font-weight: bold; 
 
            border: 1px solid #000000;
            }
 
      div.tabContent
            {
            border: 1px solid #c9c3ba; 
            padding: 0 0.1em 0 0.5em; 
            background-color: #FFFFFF;
            margin-top:0.21em;
            border-radius: 0.2em;
            padding-bottom:0.7em;
            overflow:hidden
            }
 
      div.tabContent.hide
            {
            display: none;
            }

Si je clique sur le lien "Paragraphe suivant" et que j'actualise la page, seuls les titres des onglets s'affichent. Si je d�sactive JS, toute la page s'affiche (sauf que, bien s�r, elle n'est plus organis�e en onglets).

Manifestement, la pr�sence de l'ancre "#other_paragraph" dans le lien fait �chouer le code JS. Ceci peut-il �tre corrig�?
Merci !

**Michel** · 30/03/2018, 17h51

Si je clique sur le lien "Paragraphe suivant" et que j'actualise la page, seuls les titres des onglets s'affichent.

J'ai test� la page et je ne vois pas o� est le probl�me sauf dans le fait que "actualiser la page " remet tout aux valeurs initiales et on a bien les titres des onglets et rien d'autre comme au premier lancement.

Lien avec ancre (#) fait �chouer le code JS qui organise une page en onglets

JavaScript

Vue hybride

Discussions similaires

Partager

Partager