アンカーを降ろす（テーブル内）

時には動作するように見えますが、それ以外の時は動作しません。それは信じられないほど荒いと恐ろしい使用しています。アンカーを降ろす（テーブル内）

簡略化されたレイアウト：何らかの理由で

var index = 1 
 
function next() { 
 
    if (index <= 4){ 
 
    window.location.replace('#r' + index.toString()); 
 
    index++; 
 
    } 
 
} 
 
function previous() { 
 
    if (index > 1){ 
 
    index--; 
 
    window.location.replace('#r' + index.toString()); 
 
    } 
 
}

.what { 
 
    height: 500px; 
 
}

<a href="#" onclick='next()' id="nxt">Next</a> 
 
<a href="#" onclick='previous()' id="prev">Previous</a> 
 

 
<body> 
 
<table> 
 
    <tr class="what"> 
 
    <td id="r1">r</td> 
 
    <td>o</td> 
 
    <td>w</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr class="what"> 
 
    <td id="r2">r</td> 
 
    <td>o</td> 
 
    <td>w</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr class="what"> 
 
    <td id="r3">r</td> 
 
    <td>o</td> 
 
    <td>w</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr class="what"> 
 
    <td id="r4">r</td> 
 
    <td>o</td> 
 
    <td>w</td> 
 
    <td>4</td> 
 
    </tr> 
 
</table> 
 
</body>

、唯一のid＃r1とID番号のR4のために働くようです。これを行うためのより良い、スムーズな方法がありますか？

出典

2016-10-13 AlexG

リンクは通常どおりにやっています。これは、場所を#r1に設定しようとすることと、場所を#に設定しようとすることとの間に干渉があることを意味します。

代わりに、javascriptを使用してイベントハンドラを設定し、を使用してリンクのデフォルト動作を停止します。

私は正しい他の小さなバグの自由を取った。

var index = 0 
 
function next(event) { 
 
    if (index < 4){ 
 
    index++; 
 
    window.location.replace('#r' + index.toString()); 
 
    } 
 
    event.preventDefault(); 
 
} 
 
function previous(event) { 
 
    if (index > 1){ 
 
    index--; 
 
    window.location.replace('#r' + index.toString()); 
 
    } 
 
    event.preventDefault(); 
 
} 
 
document 
 
    .getElementById('nxt') 
 
    .addEventListener('click', next); 
 
document 
 
    .getElementById('prev') 
 
    .addEventListener('click', previous);

table { 
 
    width:100%; 
 
} 
 
.what { 
 
    height: 100px; 
 
    margin: 10px; 
 
    background-color: pink; 
 
}

<a href="#" id="nxt">Next</a> 
 
<a href="#" id="prev">Previous</a> 
 

 
<body> 
 
<table> 
 
    <tr class="what"> 
 
    <td id="r1">r</td> 
 
    <td>o</td> 
 
    <td>w</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr class="what"> 
 
    <td id="r2">r</td> 
 
    <td>o</td> 
 
    <td>w</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr class="what"> 
 
    <td id="r3">r</td> 
 
    <td>o</td> 
 
    <td>w</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr class="what"> 
 
    <td id="r4">r</td> 
 
    <td>o</td> 
 
    <td>w</td> 
 
    <td>4</td> 
 
    </tr> 
 
</table> 
 
</body>

出典

2016-10-14 02:17:15 Ouroborus

これは多くの意味になります！私はそれが私の機能を覆すリンクであったことさえ気付かなかった。 – AlexG

var index = 1 
 
function next() { 
 
    if (index < 4){ 
 
    index++; 
 
    window.location.hash=('#r' + index.toString()); 
 
    console.log('next',window.location.hash) 
 
    } 
 
} 
 
function previous() { 
 
    if (index > 1){ 
 
    index--; 
 
    window.location.hash=('#r' + index.toString()); 
 
    console.log('prev',window.location.hash) 
 
    } 
 
}

.what { 
 
    height: 500px; 
 
}

<a href="javascript:void(0)" onclick='next()' id="nxt">Next</a> 
 
<a href="javascript:void(0)"onclick='previous()' id="prev">Previous</a> 
 

 
<body> 
 
<table> 
 
    <tr class="what"> 
 
    <td id="r1">r</td> 
 
    <td>o</td> 
 
    <td>w</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr class="what"> 
 
    <td id="r2">r</td> 
 
    <td>o</td> 
 
    <td>w</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr class="what"> 
 
    <td id="r3">r</td> 
 
    <td>o</td> 
 
    <td>w</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr class="what"> 
 
    <td id="r4">r</td> 
 
    <td>o</td> 
 
    <td>w</td> 
 
    <td>4</td> 
 
    </tr> 
 
</table> 
 
</body>

出典

2016-10-14 03:13:19 repzero

アンカーを降ろす（テーブル内）

答えて

関連する問題