修改

Question

我更多的是一个后端人，但我对这个与前端相关的小问题感到沮丧。

我有一个包含很少链接的侧边菜单。

<div id="sideMenu" class="vertical-menu">
    <a href="#" id="allCategories" class="active" onclick="changeClass(this)">All</a>
    <a href="#" id="fruit" onclick="changeClass(this)">Fruits</a>
    <a href="#" id="vegetables" onclick="changeClass(this)">Vegetables</a>
    <a href="#" id="fish" onclick="changeClass(this)">Fish</a>
    <a href="#" id="meat" onclick="changeClass(this)">Meats</a>
</div>

我尝试在点击时切换active课程并将其从其他菜单项中删除

<script>
    function changeClass(element) {
        $('#sideMenu').each(function(){
            var theID = $(this).attr('id');
            var menuElement = document.getElementById(theID);
            menuElement.classList.remove('active')
        });
        $(element).toggleClass('active');
    }
</script>

我已经尝试了其他一些方法而且都失败了，它会在新项目上切换active课程，但它并没有将其从其他项目中移除。

修改

我遇到了另一个问题。

 <div id="sideMenu" class="vertical-menu">
    <a href="/productsTable" id="allCategories" class="active">All</a>
    <a href="/productsTableCategory?id=1" id="fruit">Fruits</a>
    <a href="/productsTableCategory?id=2" id="vegetables">Vegetables</a>
    <a href="/productsTableCategory?id=3" id="fish">Fish</a>
    <a href="/productsTableCategory?id=4" id="meat">Meat</a>
</div>

 <script>
    $("#sideMenu a").click(function(e){
        e.preventDefault();
        $("#sideMenu a.active").removeClass("active");
        $(this).addClass("active");
    })
</script>

和后端

private ProductRepository productRepository;
    private ProductCategoryRepository productCategoryRepository;

@Autowired
public ProductsTableController(ProductRepository productRepository, ProductCategoryRepository productCategoryRepository) {
    this.productRepository = productRepository;
    this.productCategoryRepository = productCategoryRepository;
}

@RequestMapping("/productsTable")
    public String showProductsTable(Model model){
        Iterable<Product> products = productRepository.findAll();
        model.addAttribute("products", products);
        return "productsTable";
    }

@RequestMapping("/productsTableCategory")
    public String showProductsTable(Model model, @RequestParam int id) {
        ProductCategory productCategory = new ProductCategory();
        productCategory.setId(id);
        Iterable<Product> products = productRepository.findByProductCategory(productCategory);
        model.addAttribute("products", products);
        return "productsTable";
    }

现在它的工作几乎完美......几乎是因为如果我直接打开localhost:8080/productsTableCategory?id=1例如我将按照给定的ID对我的表进行排序。但是，当我尝试通过点击我的侧边菜单中的一个链接打开它时，它不会将我重定向到任何地方

Answer 1

您需要定位锚元素，使用函数.not()排除当前元素，例如element，然后使用.removeClass()。并将id选择器与sideMenu元素一起使用，即#sideMenu

function changeClass(element) {
    $('#sideMenu a').not(element).removeClass('active')
    $(element).toggleClass('active');
}

我建议您使用不显眼的事件处理程序并使用jQuery的.on()方法绑定事件

$('#sideMenu a').on('click', function (e) {
    e.preventDefault();
    $('#sideMenu a').not(this).removeClass('active')
    $(this).toggleClass('active');
})

并删除onclick="changeClass(this)"

$('#sideMenu a').on('click', function(e) {
  e.preventDefault();
  $('#sideMenu a.active').not(this).removeClass('active')
  $(this).toggleClass('active');
})

.active {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sideMenu" class=" vertical-menu">
  <a href="#" class="active">All</a>
  <a href="#">Fruits</a>
  <a href="#">Vegetables</a>
  <a href="#">Fish</a>
  <a href="#">Meats</a>
</div>

Answer 2

首先从锚中删除活动类。
然后将该类添加到单击的元素。

＆＃13;

$("#sideMenu a").click(function(e){

e.preventDefault();
$("#sideMenu a.active").removeClass("active");
$(this).addClass("active");

})

＆＃13;

.active {
  color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sideMenu" class="vertical-menu">
  <a href="#" id="allCategories" class="active">All</a>
  <a href="#" id="fruit">Fruits</a>
  <a href="#" id="vegetables">Vegetables</a>
  <a href="#" id="fish">Fish</a>
  <a href="#" id="meat">Meats</a>
</div>

＆＃13;

Answer 3

只需要在代码中更改选择器：

<script>
    function changeClass(element) {
        $('a').each(function(){        // Here a is used. It will loop through all anchor tags and apply the JQ.
            var theID = $(this).attr('id');
            var menuElement = document.getElementById(theID);
            menuElement.classList.remove('active')
        });

        $(element).toggleClass('active');
    }
</script>

Answer 4

在纯JavaScript中你可以这样做。

<div id="sideMenu" class="vertical-menu">
    <a href="#" id="allCategories" class="active" >All</a>
    <a href="#" id="fruit" >Fruits</a>
    <a href="#" id="vegetables" >Vegetables</a>
    <a href="#" id="fish" >Fish</a>
    <a href="#" id="meat" >Meats</a>
</div>

和js代码。

var links = document.querySelectorAll('#sideMenu a');


// removes active class from all links
function removeAll() {
    for (let i = 0; i < links.length; i++)
        links[i].className = '';
}

// adds active class to the clicked link, 
// but before it removes it from all other links
for (let i = 0; i < links.length; i++) {
    links[i].addEventListener('click', event => {
        removeAll();
        links[i].className = 'active';
    });
}

Answer 5

它可以帮助您激活菜单。这里使用了window.sessionStorage ..！

$("#sideMenu a").on('click', function(ev) {
    ev.preventDefault();
    window.sessionStorage.removeItem('activeMenu');
    window.sessionStorage.setItem('activeMenu', $(this).attr('href'));
    window.location.href = $(this).attr('href');
});

//check on redirected page (In your case productsTableCategory page)
$(document).ready(function() {
    if (window.sessionStorage.length > 0) {
        var menuToActive = window.sessionStorage.getItem('activeMenu');
        $("#sideMenu a.active").removeClass('active'); //comment this line to keep all menus active by default
        $('[href="' + menuToActive + '"]').addClass('active');
        window.sessionStorage.removeItem('activeMenu');
    } else {
        $('#allCategories').addClass('active');
    }
});

在1个元素上切换类并从休息中删除

修改

5 个答案: