Question

在实践中，我想通过点击页面1中的项目A，B，C等之一，从打开的第2页中的相同菜单打开上面的页面（第2页），已显示对应于页面1中单击的对应隐藏其他内容。

第1页中的

将是：

<div id="Menu" class="pointer_p">
    <a onclick="return Menu('1',this)" class="hover_red_white_p"><p>A</p></a>
    <a onclick="return Menu('2',this)" class="hover_red_white_p"><p>B</p></a>
    <a onclick="return Menu('3',this)" class="hover_red_white_p"><p>C</p></a>
    <a onclick="return Menu('4',this)" class="hover_red_white_p"><p>D</p></a>
    <a onclick="return Menu('5',this)" class="hover_red_white_p"><p>E</p></a>
    <a onclick="return Menu('6',this)" class="hover_red_white_p"><p>F</p></a>
    <a onclick="return Menu('7',this)" class="hover_red_white_p"><p>G</p></a>
    <a onclick="return Menu('8',this)"></a>
    <a onclick="return Menu('9',this)"></a>
    <a onclick="return Menu('10',this)"></a>
</div>

这是将在第2页中打开的页面：

http://jsfiddle.net/5faG7/2/

因此，要清楚，如果我点击项目A将打开一个页面，您将看到包含＆＃34; 1＆＃34;如果B包含＆＃34; 2＆＃34;其他人将保持隐藏状态。对于C，D，E等，其他隐藏等等。

提前感谢您的帮助......：）

Answer 1

如果你使用jQuery会更容易。

以下是代码：

<div id="menu">
    <a href="" data-page="1">A</a>
    <a href="" data-page="2">B</a>
    <a href="" data-page="3">C</a>
    <a href="" data-page="4">D</a>
    ...
</div>

<div id="content">
    <div data-page="1" style="display:none;">Text for page 1</div>
    <div data-page="2" style="display:none;">Text for page 2</div>
    <div data-page="3" style="display:none;">Text for page 3</div>
    <div data-page="4" style="display:none;">Text for page 4</div>
    ...
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#menu a").click(function(){
                    // Hide all the other menu items
                    $("#menu a[data-page!='" + page_name + "']").hide();
                    // Show the current menu item
                    $("#menu a[data-page='" + page_name + "']").show();
                    // Get the page name
        var page_name = $(this).data("page");
        // Hide all the pages
        $("#content div").hide();
        // Show the selected page
        $("#content div[data-page='" + page_name + "']").show();
    });
});
</script>

通过javascript链接到带有书签的另一个页面，这可能吗？

1 个答案: