javascript - スワイパーのタブ切り替え. 各ボタンをクリックしてスワイパーコンテナを移動させるにはどうすればよいですか?

Question

スワイパータブ切り替え 各ボタンをクリックしてスワイパーコンテナを移動させるにはどうすればよいですか

たとえば、NetEase の上部のタブ切り替えでは、各ボタンをクリックすると、タブ切り替えコンテナがスクロールします (1: 左右にスクロールでき、コンテンツがコンテナ全体を占めます)

http://3g.163.com/touch/auto?...

Answer 1

横スクロール.topnav_list

Answer 2

デモを作りました: https://codepen.io/anon/pen/d...

基本的な機能のみを実装しているため、移動位置はあまり正確ではありません。実際に使用する場合は、移動量を自分で調整する必要があります。

原則は、各 .topnav_item 绑定一个 onClick 的 listener。当点击元素时，取得该元素在 topnav_list 中的 index，然后把 .topnav_list を幅 * インデックス距離だけ左にシフトすることです (正確な値ではないため、調整する必要があります)。

DEMOではES2015の一部の構文を使用していますので、実際に使用する場合はブラウザの互換性にご注意ください。この図は、jQuery の .scrollLeft() メソッドを使用することで手間を省きます。実際に使用する場合は、自分で実装することができます。