Javascript 在1个元素上切换类并从rest中删除

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

我有一个附带菜单，几乎没有链接

<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>

我尝试了其他几种方法，但都失败了，它在新项目上切换

活动

类，但它不会从其他项目中删除它

编辑 我遇到了另一个问题

 <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>

$（“#侧菜单a”）。单击（功能（e）{
e、 预防默认值（）；
$（“#侧菜单a.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
})

和后端

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";
    }

private-ProductRepository-ProductRepository；
私人产品分类存储产品分类存储；
@自动连线
公共产品StableController（ProductRepository ProductRepository，ProductCategoryRepository ProductCategoryRepository）{
this.productRepository=productRepository；
this.productCategoryRepository=productCategoryRepository；
}
@请求映射（“/productsTable”）
公共字符串showProductsTable（模型）{
Iterable products=productRepository.findAll（）；
model.addAttribute（“产品”，产品）；
返回“productsTable”；
}
@请求映射（“/productsTableCategory”）
公共字符串showProductsTable（模型模型，@RequestParam int-id）{
ProductCategory ProductCategory=新产品类别（）；
productCategory.setId（id）；
Iterable products=productRepository.findByProductCategory（productCategory）；
model.addAttribute（“产品”，产品）；
返回“productsTable”；
}

---

现在它几乎完美地工作了。。。几乎是因为如果我直接打开

localhost:8080/productsTableCategory？id=1

，我的表将按给定id排序。但当我试图通过单击侧菜单中的链接之一来打开它时，它不会将我重定向到任何地方

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

<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>

函数类（元素）{
$（'a'）。每个（function（）{//此处使用a。它将循环遍历所有锚标记并应用JQ。
var theID=$（this.attr（'id'）；
var menuElement=document.getElementById（theID）；
menuElement.classList.remove（'active'）
});
$（元素）.toggleClass（'active'）；
}

只需更改代码中的选择器：

<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>

函数类（元素）{
$（'a'）。每个（function（）{//此处使用a。它将循环遍历所有锚标记并应用JQ。
var theID=$（this.attr（'id'）；
var menuElement=document.getElementById（theID）；
menuElement.classList.remove（'active'）
});
$（元素）.toggleClass（'active'）；
}

您需要使用函数以锚元素为目标，排除当前元素，即

元素

，然后使用

.removeClass（）

。并将id选择器与

侧菜单

元素一起使用，即

#侧菜单

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

---

我建议您使用不引人注目的事件处理程序，并使用jQuery的方法绑定事件

并删除

onclick=“changeClass（this）”

$（“#侧菜单a”）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（'#sideMenu a.active'）。不是（这个）。removeClass（'active'））
$（this.toggleClass（'active'）；
})

.active{
颜色：红色
}

---

您需要使用函数以锚元素为目标，排除当前元素，即

元素

，然后使用

.removeClass（）

。并将id选择器与

侧菜单

元素一起使用，即

#侧菜单

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

---

我建议您使用不引人注目的事件处理程序，并使用jQuery的方法绑定事件

并删除

onclick=“changeClass（this）”

$（“#侧菜单a”）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（'#sideMenu a.active'）。不是（这个）。removeClass（'active'））
$（this.toggleClass（'active'）；
})

.active{
颜色：红色
}

首先从锚点中移除活动类

然后将该类添加到单击的元素中

$（“#侧菜单a”）。单击（功能（e）{
e、 预防默认值（）；
$（“#侧菜单a.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
})

.active{
颜色：红色
}

首先从锚点中移除活动类

然后将该类添加到单击的元素中

$（“#侧菜单a”）。单击（功能（e）{
e、 预防默认值（）；
$（“#侧菜单a.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
})

.active{
颜色：红色
}

---

在纯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';
    });
}

var links=document.querySelectorAll（“#侧菜单a”）；
//从所有链接中删除活动类
函数removeAll（）{
for（设i=0；i{
removeAll（）；
链接[i]。类名='active'；
});
}

在纯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';
    });
}

var links=document.querySelectorAll（“#侧菜单a”）；
//从所有链接中删除活动类
函数removeAll（）{
for（设i=0；i{
removeAll（）；
链接[i]。类名='active'；
});
}

它可以帮助您激活菜单。这里是

窗口。使用会话存储

$("#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');
    }
});

---

它可以帮助您激活菜单。这里是风