如何使用查询字符串或id锚点获取直接链接

时间:2016-04-14 21:21:11

标签: jquery html css jquery-ui url

我使用的脚本类似于我在谷歌上找到的UI Selectable。

如果我有8个按钮,并且在打开页面时总是自动选择第一个按钮,那么我怎样才能通过URL通过查询字符串或id锚点另外选择另一个按钮?

点击此链接http://www.myurl.com/gallery.html#button2:selected时会自动选择第二个按钮。

或许http://www.myurl.com/gallery.html?button3=selected会自动选择第3个按钮。

我使用了jQuery Tabs和jQuery Selectable组合,因此我需要使用直接URL来自动选择选项卡3和按钮3。

由于

更新:



  $(document).ready(function () {
            $("#iframebutton1").click(function () {
                $(".iframebuttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                parent.ClickedButton1();
            });

            $("#iframebutton2").click(function () {
                $(".iframebuttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                parent.ClickedButton2();
            });

            $("#iframebutton3").click(function () {
                $(".iframebuttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                parent.ClickedButton3();
            });
        });  

 #iframebutton1 { float:left; width:110px; height:34px;  cursor:pointer; }
        #iframebutton1[isselected = "true"] { color:#ff0000;}
        #iframebutton1[isselected = "false"] { color:#0000ff; }
        #iframebutton1:hover[isselected = "false"] {color:#ff0000; }

        #iframebutton2 { float:left; width:110px; height:34px;  cursor:pointer; }
        #iframebutton2[isselected = "true"] { color:#ff0000;}
        #iframebutton2[isselected = "false"] { color:#0000ff; }
        #iframebutton2:hover[isselected = "false"] {color:#ff0000; }

        #iframebutton3 { float:left; width:110px; height:34px;  cursor:pointer; }
        #iframebutton3[isselected = "true"] { color:#ff0000;}
        #iframebutton3[isselected = "false"] { color:#0000ff; }
        #iframebutton3:hover[isselected = "false"] {color:#ff0000; }

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://akacija.ba/tabs.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example of my problem</title>
</head>
<body>

 <div id="tabs">
 <ul>
    <li><a href="#tabs-1" id="iframebutton1"  class="iframebuttons" isselected="true"  value="iframebutton1">BUTTON 1</a></li>
    <li><a href="#tabs-2" id="iframebutton2"  class="iframebuttons" isselected="false" value="iframebutton2">BUTTON 2</a></li>
    <li><a href="#tabs-3" id="iframebutton3"  class="iframebuttons" isselected="false" value="iframebutton3">BUTTON 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>THIS IS TAB 1 AND THIS TAB IS AUTO SELECTED WHEN YOU OPEN THIS PAGE</p>
  </div>
  <div id="tabs-2">
    <p>THIS IS TAB 2 AND THIS TAB IS NOT AUTO SELECTED</p>
  </div>
  <div id="tabs-3">
    <p>HOW TO OPEN THIS TAB DIRECTLY USING URL BUT WITH BUTTON 3 TO BE SELECTED INSTEAD OF BUTTON 1 WHICH IS AUTOSELECTED. I USE www.myurl.com/index.html#tabs-3 , BUT BUTTON 1 IS STILL SELECTED INSTEAD OF BUTTON 3</p>
  </div>
</div>

</body>
</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案