Question

我有一个网站使用jQuery来隐藏或显示内容以响应按下的按钮，这样人们就可以更快地找到他们正在寻找的内容。但是，我希望能够将目标用户链接到已显示特定类型内容的页面。

简单来说，页面结构如下：

<!DOCTYPE html>
<html>
    <script src="jquery-1.8.3.js"></script>

    <script type="text/javascript">
        $(window).load(function(){
            $("#b1").click(function(){
                $(".type1").show(); 
                $(".type2").hide();
            });
            $("#b2").click(function(){
                $(".type1").hide(); 
                $(".type2").show();
            });

            $(".type1").hide(); 
            $(".type2").hide(); 
        })
    </script>

    <body>
        <button id="b1">1</button>
        <button id="b2">2</button>
        <div class="type1">This content is shown when button 1 is pressed.</div>
        <div class="type2">When button 2 is pressed this content is shown.</div>
    </body>
</html>

如果我希望能够向Person A发送一个指向最初显示“type1”div的站点的链接，并且Person B指向最初显示“type2”div的同一站点的链接，那么最实用的是什么溶液

请注意：我是自学成才的程序员，虽然我在这个网站上做了很多搜索，但这是我第一次提问。所以如果我的问题或格式有任何错误或奇怪，我会提前道歉，否则我可能会注意到。

Answer 1

如果我能告诉你，最好的解决方案是：

向某人发送类型为的网址：http://www.example.com?view=1或http://www.example.com?view=2

然后在您的网页中使用此数据收集数据（如果是PHP）：

  if($_GET["view"]) {
     echo "<script>var v=". $_GET['view']. "</script>";
  }

然后在javascript中使用：

$(document).ready(function(){
  if(v==1){
    $(".type2").hide(); 
    $(".type1").show(); 
  }
  else if(v==2){
    $(".type1").hide(); 
    $(".type2").show(); 
  }
});
$("#b1").click(function(){
  $(".type1").show(); 
  $(".type2").hide();
});
$("#b2").click(function(){
  $(".type1").hide(); 
  $(".type2").show();
});

Answer 2

我认为您为Person A和Person B提供的网站链接的方式分别为www.yoursite.com/Anypage?type=PersonA和www.yoursite.com/Anypage?type=PersonB。所以基本上，您会尝试将此标识符作为参数传递给url。您可以获取url的参数，确定正在访问的人，并相应地show/hide各自div。请考虑以下示例。

<强> JS

最初来自 this answer 的以下功能，提取网址参数值。

function getURLparam( name) {
  url = location.href;
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( url );
  return results == null ? null : results[1];
}

使用上述功能获取网址值。

$(document).ready(function(){
    var type=getURLParam('type'); //Passing the parameter key
    //type variable will have either PersonA or PersonB
    if(type=="PersonA"){
        $(".type1").show();
    }
    else{
        if(type=="PersonB"){
            $(".type1").show();
        }
    }

    $("#b1").click(function(){
         $(".type1").show(); 
         $(".type2").hide();
    });
    $("#b2").click(function(){
         $(".type1").hide(); 
         $(".type2").show();
    });
    /*$(".type1").hide(); 
    $(".type2").hide();*/
    //instead of this you can add css `display:none` for both the `class`
})

<强> CSS

.type1,.type2{
   display:none;
}

Answer 3

这是另一个建议：

制作以下链接：http://example.com/#type1和http://example.com/#type2
使其更加灵活，以便您可以在不更改JS代码的情况下添加更多类型：
- 对于type1，type2的每个元素，添加另一个类type
- 要为ID b1，b2的每个元素添加一个数据属性，例如ex。 data-toggle="type2" （如果您在其他地方不需要，可以删除id）

然后Javascript：

function toggleType(type) {
    $('.type').hide().filter('.'+type).show();
}

var initialType = location.hash && location.hash.substring(1) || 'type1';

toggleType(initialType);

$('[data-toggle]').click(function () {
    toggleType($(this).data('toggle'));
});

在页面加载时隐藏或显示动态定位的html元素的最佳方法？

3 个答案: