Question

我已经格式化了我的网站，其中链接打开了不同的div而不是不同的页面。

类似的东西：

<li><a id="search-reg-options" data-display="#search-adds"
                    class="side-a-li">SEX OFFENDER SEARCH</a>
                    <div id="search-adds" class="sub-options">
                        <ul>
                            <li><a data-display="#mapdiv" class="side-a-option">SEARCH
                                    SEX OFFENDER REGISTRIES</a></li>
                            <li><a class="side-a-option">SEX OFFENDER MANAGEMENT
                                    PROGRAM SUCCESS</a></li>
                            <li><a class="side-a-option">SEX OFFENDER MANAGEMENT
                                    PROGRAM SUCCESS</a></li>
                        </ul>
                    </div></li>

    $(document).ready(function(e) {
        $('a').not($('#search-reg-options')).click(function(e) {
            $('.ui-show').removeClass('ui-show')
            var mydiv = $(this).data('display');
            $(mydiv).addClass('ui-show');
        });

        $('#search-reg-options').click(function(e) {
            $('.options-shown').removeClass('options-shown')
            var mydiv = $(this).data('display');
            $(mydiv).addClass('options-shown');
        });
    });

因此，点击链接将打开div我更改显示。这个问题是我不知道如何将用户链接到特定的div，以便当他们点击链接时，div已经显示出来。

也许某些javascript或其他东西可以解决这个问题？我宁愿不重建我的项目，以便每个页面都是一个不同的jsp文件。

澄清，

我希望localhost：8080 / frontpage /＃div1在网站加载时打开div1 ......

这个webapp有一个spring MVC骨干，所以如果能以某种方式解决它。那也没关系。

Answer 1

如果存在，则可以使用访问位置.hash然后运行代码，就像有人点击锚点一样。

hash属性设置或返回URL的锚点部分，包括井号（＃）。

$(document).ready(function(){

    if (location.hash.length != 0) {
        $('.ui-show').removeClass('ui-show')
        var mydiv = location.hash;
        $(mydiv).addClass('ui-show');
    }

});

Answer 2

$(function(){
		$('a').click(function(){
		
			var tooglediv=$(this).attr('data-toggle');
			
		$(tooglediv).toggleClass('active');
		});
	
	});

          .toggle {
                width:50px;
    			height:0;
    			display:none;
                background:#333;
    		}
    		.toggle.active {
    		    height:50px;
    		    display:block;
    		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#" data-toggle="#toggle">click</a>
    <div class="toggle" id="toggle"></div>

使用特定链接打开特定div

2 个答案: