Топ дня: Something

Есть такой кусок кода


Имеется меню с разными разделами.

onclick="javascript:collapsElement(1) отвечает за смену содержимого в блоке.

<a href="#one" id="one"> эта часть отвечает за то какая ссылка будет подчеркиваться в зависимости от выбранного раздела.

Проблема в том что страница прокручивается при переходе от раздела к разделу. Как мне запретить это прокручивание?

Прикрепил видео что-бы было понятнее.

https://jsfiddle.net/stgd31nu/
------
70598_video_20200220_230100.mp4 (6.5 Mb)
Скачиваний: 168

________
посл. ред. 20.02.2020 в 20:08; всего 1 раз(а); by GarDiz

<a href="#one" id="one" onclick="event.preventDefault(); javascript:collapsElement(1);">Раздел один</a>

________
посл. ред. 20.02.2020 в 19:21; всего 1 раз(а); by mrcatoff

mrcatoff, Мне с кодом тоже поможешь? Скину донат :D

mrcatoff, спасибо, пробовал так, но. Действие происходит но перехода по ссылке нет. Из-за этого не срабатывает подчеркивание.

mrcatoff,
https://jsfiddle.net/stgd31nu/

Так будет удобнее

NOeasyKiDD, С каким кодом?

GarDiz, Создайте класс active и после нажатия на ссылку назначайте ей class active а у других убирайте в области одной видимости

GarDiz, https://jsfiddle.net/mrcatoff/ughxv4ck/3/

mrcatoff, Блииин, то что надо. Спасибо огромное.

Если нужен табуляция

 interface UIOption {

   el?: HTMLElement;

   parent?: UI;

   content?: string;

   classList?: string[];

   styleList?: { [name: string]: string | number };

   hidden?: boolean;

 }

 

 function concat(left: string[], right: string[]) {

   if (left && right) {

     return left.concat(right);

   }

 

   return left || right;

 }

 

 class UI {

   protected el: HTMLElement;

 

   constructor(tagName: string, option: UIOption = { classList: [] }) {

     if (option.el == null) {

       option.el = document.createElement(tagName);

     }

 

     if (option.parent != null) option.parent.el.appendChild(option.el);

     if (option.classList != null) option.el.classList.add(...option.classList);

     if (option.styleList != null) null;

     if (option.content != null) option.parent.el.textContent = option.content;

     if (option.hidden != null) option.el.hidden = option.hidden;

 

     this.el = option.el;

   }

 

   set hidden(hidden: boolean) {

     this.el.hidden = hidden;

   }

 

   get hidden(): boolean {

     return this.el.hidden;

   }

 

   get classList(): DOMTokenList {

     return this.el.classList;

   }

 

   getAttribute(name: string): string {

     return this.el.getAttribute(name);

   }

 

   addEventListener<K extends keyof HTMLElementEventMap>(

     type: K,

     listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,

     options?: boolean | AddEventListenerOptions

   ) {

     this.el.addEventListener(type, listener, options);

   }

 }

 

 namespace UI {

   export class Panel extends UI {

     constructor(option: UIOption = { classList: [] }) {

       super(

         "div",

         Object.assign<UIOption, UIOption>(option, {

           classList: concat(["panel"], option.classList)

         })

       );

     }

   }

 

   export class TabPanel extends Panel {

     private _active: number = 0;

     private _strip = new UI("ol", {

       parent: this,

       classList: ["strip", "container"]

     });

     items: Array<{ content: UI; button: UI }> = [];

     opens: { [name: string]: number } = {};

 

     constructor(option: UIOption = { classList: [] }) {

       super(

         Object.assign<UIOption, UIOption>(option, {

           classList: concat(["tab"], option.classList)

         })

       );

       this.el.querySelectorAll<HTMLElement>(":scope > div").forEach(el => {

         this.createButton(new UI("div", { el, parent: this, hidden: true }));

       });

 

       this.items[this._active].button.classList.add("active");

       this.items[this._active].content.hidden = false;

     }

 

     createButton(content: UI): number {

       let button = new UI("button", { parent: this._strip });

       let index = this.items.push({ content, button });

 

       button.addEventListener("click", () => {

         this.active = index - 1;

       });

 

       new UI("div", {

         parent: button,

         content: content.getAttribute("data-title")

       });

 

       return index - 1;

     }

 

     set active(index: number) {

       if (this._active == index) return;

       this.items[this._active].button.classList.remove("active");

       this.items[this._active].content.hidden = true;

       this.items[index].button.classList.add("active");

       this.items[index].content.hidden = false;

       this._active = index;

     }

 

     createPanel(el: HTMLDivElement, options?: { name?: string }): number {

       let content = new UI("div", { el, parent: this, hidden: true });

       let index = this.createButton(content);

 

       if (options && options.name !== undefined) {

         this.opens[options.name] = index;

       }

 

       return index;

     }

 

     open(name: string, create: (name: string) => HTMLDivElement) {

       let index = this.opens[name];

 

       if (index == undefined) {

         index = this.createPanel(create(name), { name });

       }

 

       this.active = index;

     }

   }

 }

 

 export default UI;

 

Мой код на ts но реализация ясное как делать тебе.