Question

我对Jquery很新，所以我在w3schools.com上经历了一些例子，以获得如何编写更好代码的一些想法。出于好奇心，我提出了这个非常简单的菜单，其中有四个div，一个名为#main-slide的主要div，其中包含指向三个子幻灯片的三个链接sub-slide-one，{{1} }，sub-slide-two。顺便说一句，这些都没有实际上滑入或滑出我只是出于任何原因这样命名。

这是HTML：

sub-slide-three

这是CSS：

<body>


  <div id="main-slide">

    <a class="Subone" href="#">SUB ONE</a>
    <a class="Subtwo" href="#">SUB TWO</a>
    <a class="Subthree" href="#">SUB THREE</a>

  </div>


  <div id="sub-slide-one">

    <h1>SUB ONE</h1>

    <a class="BackMain1" href="#">BACK TO MAIN</a>

  </div>

  <div id="sub-slide-two">

    <h1>SUB TWO</h1>

    <a class="BackMain2" href="#">BACK TO MAIN</a>

  </div>



  <div id="sub-slide-three">

    <h1>SUB THREE</h1>

    <a class="BackMain3" href="#">BACK TO MAIN</a>

  </div>

</body>

对于JavaScript，每个链接都有一个fadein / fadeout点击功能。例如，当点击body { background-color: antiquewhite; } h1 { text-align: center; padding-top: 30px; } a { text-decoration: none; color: #fff; font-family: arial; font-weight: bold; text-align: center; display: block; padding-top: 30px; } #sub-slide-one, #sub-slide-two, #sub-slide-three { display: none; width: 90%; height: 600px; position: relative; margin: 0 auto; margin-top: 30px; } #main-slide { width: 90%; height: 600px; position: relative; margin: 0 auto; margin-top: 30px; background-color: aliceblue; display: block; } #sub-slide-one { background-color: cadetblue; } #sub-slide-two { background-color: crimson; } #sub-slide-three { background-color: cornflowerblue; } .Subone, .Subtwo, .Subthree { width: 100%; height: 200px; display: block; } .Subone { background-color: dodgerblue; } .Subtwo { background-color: darkkhaki; } .Subthree { background-color: darkgoldenrod }时，Subone淡出，#main-slide淡入。每个子幻灯片都包含一个链接回主幻灯片的后退链接。这是我最终遇到问题的地方，菜单按预期工作，但是当我点击sub-slide-one链接时，无论出于何种原因，它都会跳到顶部。

但是为了正确地获得fadein / out div的后向链接，我必须使用单独的类创建每个后向链接，并使用单独的函数来获得所需的结果。

这是Jquery：

SubThree

我必须相信有一种更有效的方法可以做到这一点，但我似乎无法弄清楚如何做到这一点。这是指向JSfiddle的链接，以便在行动https://jsfiddle.net/Dylancougar/k9f53wpp/

中查看此内容

Answer 1

为父菜单定义公共类，并使用ID作为父菜单和子菜单之间的关系。获取Click上的ID并使用它来决定哪个子菜单必须做出反应：

 <div id="main-slide">

    <a class="topmenu" id="1" href="#">SUB ONE</a>
    <a class="topmenu" id="2" href="#">SUB TWO</a>
    <a class="topmenu" id="3" href="#">SUB THREE</a>

  </div>


  <div id="sub-slide-1">

    <h1>SUB ONE</h1>

    <a class="Back" id="1" href="#">BACK TO MAIN</a>

  </div>

jquery的：

  $(".topmenu").click(function() {
    var id=$(this).attr("id");
    $("#main-slide").fadeOut(1200);
    $("#sub-slide-"+id).delay(1200).fadeIn(1200);
  });

并使用相同的方法关闭正确的子菜单。

  $(".back").click(function() {
    var id=$(this).attr("id");
    $("#sub-slide-"+id).fadeOut(1200);
    $("#main-slide").delay(1200).fadeIn(1200);
  });

请注意，不建议在单个页面内重复和ID。因此，您可以定义更复杂的ID，例如open1或close1并在计算之前删除多余的单词。

var id=$(this).attr("id").replace("open","");

Answer 2

你可以达到你想要的效果this。因此，您必须通过为每个相同元素添加公共类来更改HTML结构，并为每个元素添加一个id。它会稍微改变你的CSS。

JS

#define F_CPU 16000000  //Clock Speed
#define UART_BAUD 9600

#include <stdio.h>
#include <avr/io.h>
#include <util/delay.h>
#include <avr/pgmspace.h>
#include <avr/interrupt.h>
#include "uart.h"
#include <stdlib.h>

volatile unsigned int encPosZ=0;

void sendEncValue(unsigned int value){
    char string[5];
    itoa(value, string, 10);
    uart_puts(string);      
}  

// main
int main(void)
{
    //disable all interrupts
    cli();      
    uart_init(UART_BAUD_SELECT(UART_BAUD,F_CPU));                   
    DDRE &=~ (1 << PE4);
    DDRE &=~ (1 << PE5);

    /* set pull-up enabled   */     
    PORTE |= (1 << PE4)|(1 << PE5);

    EIMSK |= (1 << INT4)|(1 << INT5);       

    /* INT4 - falling edge, INT5 - rising edge */       
    EICRB|= (1<<ISC41)|(1<<ISC51)|(1<<ISC50);

    // Enable the Global Interrupt Enable flag
    sei();          
    uart_puts("Started... "); 

    while(1)
    {
        _delay_ms(5);           
    }
    return 0;
}       

//INT4 interrupt
ISR(INT4_vect)
{
    if(!bit_is_clear(PINE, PE5)){
        encPosZ++;
    }else{
        encPosZ--;
    }
   sendEncValue(encPosZ);       
}

//INT5 interrupt
ISR(INT5_vect)
{
    if(bit_is_clear(PINE, PE4)){
        encPosZ++;
    }else{
        encPosZ--;
    }
    sendEncValue(encPosZ);  
}

添加e.preventDefault（）将避免在单击链接时转到顶部。这与Ali Sheikhpour给你的解决方案完全相同。通过这种方式，它易于维护且易于理解（无需重复）。

寻找一种更有效的方式来编写这个jquery菜单

2 个答案: