javascript - jquery get previous a href

Question

Hello i want to get the previous clicked a href. The site doesnt reload.

<li><a href="#section3"><b>Restaurant</b></a></li>

This jumps to div id=section3

<script type="text/javascript">
        $(function() {
            $('a[href*="section"]').bind('click',function(event){
                var $anchor = $(this);
                var addressValue = $(this).attr("href");

                $(addressValue).css("display","block");  
                $('html, body').animate({ 
                    scrollLeft: $($anchor.attr('href')).offset().left
                }, 1000,'easeInOutExpo',function(){

                });   
      var allsections = '#section2,#section3,#section4,#section5,#section6,#section7,#section8,#section9,#section10,#section11,#section12,  #section13,#section14,#section15,#section16,#section17,#section18,#section19,#section20,#section21,#section22';  
       var removedsec = allsections.replace(addressValue+",",'');
         //   alert(removedsec);
         setTimeout(function () {  
                $(removedsec).removeAttr("style");  
          }, 100)
             });
        });
    </script>

The divs are all displayed none. If i click on a link it set the actual div on block. I need to let the previous clicked link to be displayed block to. If than the next link is clicked the first div should be set do display none.

Could i explain how i want it :D

Answer 1

尝试这个

$(function() {
           var prev_div = '';
            $('a[href*="section"]').bind('click',function(event){
                var $anchor = $(this);
                var addressValue = $(this).attr("href");
                if(prev_div.length) {
                   $(prev_div).css("display","block");     
                }
                $(addressValue).css("display","block");
                prev_div = addressValue;  
                $('html, body').animate({ 
                    scrollLeft: $($anchor.attr('href')).offset().left
                }, 1000,'easeInOutExpo',function(){

                });   
      var allsections = '#section2,#section3,#section4,#section5,#section6,#section7,#section8,#section9,#section10,#section11,#section12,  #section13,#section14,#section15,#section16,#section17,#section18,#section19,#section20,#section21,#section22';  
       var removedsec = allsections.replace(addressValue+",",'');
         //   alert(removedsec);
         setTimeout(function () {  
                $(removedsec).removeAttr("style");  
          }, 100)
             });
       var removedsec1 = allsections.replace(prev_div+",",'');
         //   alert(removedsec1);
         setTimeout(function () {  
                $(removedsec1).removeAttr("style");  
          }, 100)
             });
        });

Answer 2

您可以将活动部分和前一部分存储在一个数组中：

(function () {
    var history = [];
    $('a[href*="section"]').bind('click', function (e) {
        // prevent default behavour of your link
        e.preventDefault();
        // determine the section related to this.href
        var $section = $('.section').filter($(this).attr('href'));
        // add it to our history array
        history.push($section);
        // if the history contains more than 2 items, remove the first
        if(history.length > 2) {
            history.shift();
        }
        // hide all sections
        $(".section").hide();
        // show the two sections in history
        $(history).show();
        // return false, also to prevent the link's default behaviour
        return false;
    });
}());

Answer 3

简单的解决方案是为所有部分 div 设置一个类。喜欢，然后当您单击任何部分时，只需将它们全部隐藏：

$(function() {
        $('a[href*="section"]').bind('click',function(event){
            $(".section").hide();
            var $anchor = $(this);
            var addressValue = $(this).attr("href");
            ...........................

Hide() 对已经隐藏的 div 没有影响，因此您不必知道哪个是可见的。

其他解决方案是遍历它们并检查 .is(":visible") 以查看哪个没有隐藏。

但我会推荐第一个解决方案，它快速且有效。

Answer 4

取消链接上的默认事件：

$('a[href*="section"]').bind('click',function(event){
    event.preventDefault();
    //.
    //.
    //rest of your code
});